到了路由功能了。路由分前端路由和后端路由，这里先来看前端。vue有个好用的插件vue-router来解决路由的麻烦，它与组件配合就能很好地组织网页了。
vue-router基本使用：
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
| <script src="./lib/vue-router.js"></script>
<div id="app">
<router-link to="/login">login</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>login组件</h1>'
}
var register = {
template: '<h1>register组件</h1>'
}
var router = new VueRouter({
routes: [
{path: '/', redirect: '/login'},
{path: '/login', component: login} , //必须是模板对象，不能是组件名称
{path: '/register', component: register}
]
})
var app = new Vue({
el: '#app',
router
})
</script>
|
vue-router切换时的当前路径的高亮显示：
1
2
3
4
5
| <style>
.router-link-active{
color:red;
}
</style>
|
vue-router路由传参：
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
| 1、$route.query
<router-link to="/login?id=10">login</router-link>
var login = {
template: '<h1>login组件---{{ $route.query.id }}</h1>',
created () {
console.log(this.$route.query.id)
}
}
2、$route.params
<router-link to="/login/10">login</router-link>
var login = {
template: '<h1>login组件---{{ $route.params.id }}</h1>',
created () {
console.log(this.$route.params.id)
}
}
var routerObj = new VueRouter({
routes: [
{path: '/login/:id', component: login} ,
{path: '/register', component: register}
]
})
|
子路由（路由嵌套）的设计
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
38
39
| <div id="app">
<router-link to="/login">login</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
<template id="tmp">
<div>
<router-link to="/register/weibo">微博注册</router-link>
<router-link to="/register/phone">手机注册</router-link>
<router-view></router-view>
</div>
</template>
var login = {
template: '<h1>login组件</h1>'
}
var weibo = {
template: '<h1>weibo组件</h1>'
}
var phone = {
template: '<h1>phone组件</h1>'
}
var register = {
template: '#tmp'
}
var router = new VueRouter({
routes: [
{path: '/', redirect: '/login'},
{path: '/login', component: login} ,
{path: '/register', component: register,
children: [
{path: 'weibo',component: weibo},
{path: 'phone',component: phone}
]
}
]
})
|
命名视图布局(name指定组件名)，多个组件布置
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
| <div id="app">
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
var header= {
template: '<h1>header组件</h1>'
}
var left = {
template: '<h1>left组件</h1>'
}
var main = {
template: '<h1>main组件</h1>'
}
var router = new VueRouter({
routes: [
{path: '/', components: {
default: header,
left: left,
main: main
}}
]
})
|
网络研习社系列文章：
@lemooljiang #network-institute
This page is synchronized from the post: vue-router路由的参数和设计 / 网络研习社#15