- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在通过阅读文档来学习 VueJS 路由。我从页面中打开了一个示例,并将自己的嵌套路由添加为“/user/foo/posts/1、/user/foo/posts/2、/user/foo/posts/3”,并期望它们能够正确显示
我尝试仔细阅读起始示例以及路由文档( Nested Routes 上的页面)。没有任何线索让我知道出了什么问题。
代码如下:
HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<p>
<router-link to="/user/foo">/user/foo</router-link>
<router-link to="/user/foo/profile">/user/foo/profile</router-link>
<router-link to="/user/foo/posts">/user/foo/posts</router-link>
<!-- stuff I added myself below this line (comment is not present in original code) -->
<router-link to="/user/foo/posts/1">/user/foo/posts/1</router-link>
<router-link to="/user/foo/posts/2">/user/foo/posts/2</router-link>
<router-link to="/user/foo/posts/3">/user/foo/posts/3</router-link>
</p>
<router-view></router-view>
</div>
JS:
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }
const PostOne = { template: '<p>Gonna clone Twitter</p>'}
const PostTwo = { template: '<h5>Not gonna clone IG until Im done Twitter</h5'}
const PostThree = { template: '<p>Gonna be a paid web developer</p>'}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: UserHome },
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
{ path: 'profile', component: UserProfile },
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
{ path: 'posts', component: UserPosts,
children: [
// the posts within /posts
{ path: "1", component: PostOne },
{ path: "2", component: PostTwo },
{ path: "3", component: PostThree }
]
}
]
}
]
})
const app = new Vue({ router }).$mount('#app')
具体来说,我希望/1 说“要克隆 Twitter”,/2 说“在完成 Twitter 之前不会克隆 IG”(在 h5 标签中),/3 说“要成为付费网站”开发商”。
我希望看到这些文本加载在“用户 foo单击链接时发布“帖子”,但我没有。
编辑:请注意,我只尝试在 JSFiddle 环境中运行它。这是 fiddle 本身,我希望代码能够正常运行:https://jsfiddle.net/rolandmackintosh/use04pwf/9/
最佳答案
所以你面临的问题是你不仅嵌套路由,而且嵌套组件。当一个路由有它自己的组件和子路由时,需要有一个 <router-view>
供 child 加载。此更改为 UserPosts
会让它为你工作:
const UserPosts = { template: '<div>Posts<router-view></router-view></div>' }
关于javascript - 为什么 VueJS 没有在 html 中显示我的嵌套路由?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58546888/
我正在使用 Gunicorn 为 Django 应用程序提供服务,它工作正常,直到我将其超时时间从 30 秒更改为 900000 秒,我不得不这样做,因为我有一个用例需要上传和处理一个巨大的文件(过程
我有一个带有非常基本的管道的Jenkinsfile,它可以旋转docker容器: pipeline { agent { dockerfile { args '-u root' } } stag
在学习 MEAN 堆栈的过程中,我遇到了一个问题。每当我尝试使用 Passport 验证方法时,它都不会返回任何响应。我总是收到“localhost没有发送任何数据。ERR_EMPTY_RESPONS
在当今的大多数企业堆栈中,数据库是我们存储所有秘密的地方。它是安全屋,是待命室,也是用于存储可能非常私密或极具价值的物品的集散地。对于依赖它的数据库管理员、程序员和DevOps团队来说,保护它免受所
是否可以创建像图片上那样的边框?只需使用 css 边框属性。最终结果将是没 Angular 盒子。我不想添加额外的 html 元素。我只想为每个 li 元素添加 css 边框信息。 假设这是一个 ul
我是一名优秀的程序员,十分优秀!