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