本帖最后由 谷粒姐姐 于 2019-5-28 15:09 编辑
3.4.2 嵌套路由
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。 创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
别忘了在父级 Vue 文件内增加 <nuxt-child/> 用于显示子视图内容。
假设文件结构如：
[AppleScript] 纯文本查看 复制代码 pages/
‐‐| user/
‐‐‐‐‐| _id.vue
‐‐‐‐‐| index.vue
‐‐| user.vue
Nuxt.js 自动生成的路由配置如下：
[AppleScript] 纯文本查看 复制代码 router: {
routes: [
{
path: '/user',
component: 'pages/user.vue',
children: [
{
path: '',
component: 'pages/user/index.vue',
name: 'user'
},
{
path: ':id',
component: 'pages/user/_id.vue',
name: 'user‐id'
}
]
} ] }
将user.vue文件创建到与user目录的父目录下，即和user目录保持平级。
[AppleScript] 纯文本查看 复制代码 <template>
<div>
用户管理导航，<nuxt‐link :to="'/user/101'">修改</nuxt‐link>
<nuxt‐child/>
</div> </template> <script>
export default{
layout:"test" }
</script> <style>
[AppleScript] 纯文本查看 复制代码 </style>
_id.vue页面实现了向页面传入id参数，页面内容如下：
[AppleScript] 纯文本查看 复制代码 <template>
<div>
修改用户信息{{id}}
</div> </template> <script>
export default{
layout:"test",
data(){
return {
id:''
}
},
mounted(){
this.id = this.$route.params.id;
console.log(this.id)
}
}
</script> <style>
</style>
| 
收藏
淘帖
踩
