# 49嵌套路由，动态路由的实现方式
# 1.嵌套路由用法(★★★)
# 2.嵌套路由功能分析
- 点击父级路由链接显示模板内容
- 模板内容又有子级路由链接
- 点击子级路由链接显示子级模板内容
# 3.父路由组件模板
- 父级路由链接
- 父组件路由填充位
<p>
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
</p>
<div>
<!-- 控制组件的显示位置 -->
<router-view></router-view>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 4.子级路由模板
- 子级路由链接
- 子级路由填充位
const Register = {
template: `<div>
<h1>Register 组件</h1>
<hr/>
<router-link to="/register/tab1">Tab1</router-link>
<router-link to="/register/tab2">Tab2</router-link>
<!-- 子路由填充位置 -->
<router-view/>
</div>
`
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 5.定义子组件
const Tab1 = {
template: '<h3>tab1 子组件</h3>'
}
const Tab2 = {
template: '<h3>tab2 子组件</h3>'
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 6.嵌套路由配置
- 父级路由通过children属性配置子级路由
const router = new VueRouter({
routes: [
{path:"/user",component:User},
{path:"/register",
component: Register,
// 通过 children 属性, 为 /register 添加子路由规则
children: [
{path:"/register/tab1", component: Tab1},
{path:"/register/tab2", component: Tab2}
]
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。
嵌套路由最关键的代码在于理解子级路由的概念： 比如我们有一个/login的路由 那么/login下面还可以添加子级路由，如: /login/account /login/phone
参考代码如下：
var User = { template: "<div>This is User</div>" }
//Login组件中的模板代码里面包含了子级路由链接以及子级路由的占位符
var Login = { template: `<div>
<h1>This is Login</h1>
<hr>
<router-link to="/login/account">账号密码登录</router-link>
<router-link to="/login/phone">扫码登录</router-link>
<!-- 子路由组件将会在router-view中显示 -->
<router-view></router-view>
</div>` }
//定义两个子级路由组件
var account = { template:"<div>账号：<input><br>密码：<input></div>"};
var phone = { template:"<h1>扫我二维码</h1>"};
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
{ path:"/",redirect:"/user"},
{ path: "/user", component: User },
{
path: "/login",
component: Login,
//通过children属性为/login添加子路由规则
children:[
{ path: "/login/account", component: account },
{ path: "/login/phone", component: phone },
]
}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router:myRouter
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
页面效果大致如下：
# 7.动态路由匹配(★★★)
思考:
<!-- 有如下 3 个路由连接 -->
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
1
2
3
4
2
3
4
// 定义如下三个对应的路由规则, 是否可行?
{path: "/user/1", component: User}
{path: "/user/2", component: User}
{path: "/user/3", component: User}
1
2
3
4
2
3
4
# 8.动态路由模式
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数 以冒号开头
{ path: "/user/:id", component: User},
]
})
1
2
3
4
5
6
7
2
3
4
5
6
7
组件如何获取id ?
const User = {
// 路由组件中通过 $route.params 获取路由参数
template: '<div>User {{ $route.params.id }}</div>'
}
1
2
3
4
2
3
4
# 9.路由组件传递参数 (推荐)
$route与对应路由形成高度耦合, 不够灵活, 所以可以使用props将组件和路由解耦
# 10.props的值为布尔类型
const router = new VueRouter({
routes: [
// 如果 props 被设置为 true, route.params 将会被设置为组件属性
{ path: '/user/:id', component: User, props: true }
]
})
const User = {
props: ['id'], // 使用 props 接收路由参数
template: '<div>用户ID: {{ id }} </div>' // 使用路由参数
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 11.props的值为对象类型
- 缺点: 不能接收 id 这个参数
const router = new VueRouter({
routes: [
// 如果 props 是一个对象, 它会被按原样设置为组件属性
{path: '/user/:id', component: User, props: { uname: 'lisi', age: 12 }}
]
})
const User = {
props: ['uname', 'age'],
template: '<div>用户信息: {{ uname + '---' + age }}</div>'
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 12.props的值为函数类型
- 如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为 函数形式。
const router = new VueRouter({
routes: [
// 如果 props 是一个函数, 则这个函数接收 route 对象为自己的形参
{path: '/user/:id',
component: User,
props: route => ({uname: 'xc', age: 18, id: route.params.id })}
]
})
const User = {
props: ['uname', 'age', 'id'],
template: '<div>用户信息: {{ uname + '---' + age + '---' + id }}</div>'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13