学成在线-第12天-讲义-搜索前端 Nuxt.js 四

3.4 路由 
3.4.1 基础路由 
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
Nuxt.js根据pages的目录结构及页面名称定义规范来生成路由，下边是一个基础路由的例子：
假设 pages 的目录结构如下： 

pages/
‐‐
| user/
‐‐‐‐‐
| index.vue
‐‐‐‐‐
| one.vue

那么，Nuxt.js 自动生成的路由配置如下：

router: {
routes: [
{
name:
'
user
'
,
path:
'
/user
'
,
component:
'
pages/user/index.vue
'
},
{
name:
'
user
‐
one
'
,
path:
'
/user/one
'
,
component:
'
pages/user/one.vue
'
}
]
}

index.vue代码如下：

<template>
<div>
用户管理首页
</div>
</template>
<script>
export default{
layout:
"
test
"
}
</script>
<style>
</style>

one.vue代码如下：

<template>
<div>
one页面
</div>
</template>
<script>
export default{
layout:
"
test
"
}
</script>
<style>
</style>

分别访问如下链接进行测试： 
http://localhost:10000/user 
http://localhost:10000/user/one 
3.4.2 嵌套路由
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
别忘了在父级 Vue 文件内增加 <nuxt-child/> 用于显示子视图内容。
假设文件结构如： 

pages/
‐‐
| user/
‐‐‐‐‐
| _id.vue
‐‐‐‐‐
| index.vue
‐‐
| user.vue

Nuxt.js 自动生成的路由配置如下：

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目录保持平级。

<template>
<div>
用户管理导航，<nuxt
‐
link :to
=
"'
/user/101
'"
>修改</nuxt
‐
link>
<nuxt
‐
child/>
</div>
</template>
<script>
export default{
layout:
"
test
"
}
</script>
<style>
</style>

_id.vue页面实现了向页面传入id参数，页面内容如下：

<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>