vue-router初识

vue-router 是vue框架的前端路由插件,主要是通过监测 onhashChange 事件,在动态挂载不同组件到固定位置。

1. 基本配置

如下代码:

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
40
41
42
43
44
45
46
<body>
<div id="app"></div>

<script src="dist/vue.js"></script>
<script src="dist/vue-router.js"></script>

<script>
var Login = {
template: '<div><h1>我是登陆页面</h1></div>'
};

var Register = {
template: '<div><h1>我是注册页面</h1></div>'
};

// 1. 声明路由配置对象
var myRouter = new VueRouter({
routes: [
{path: '/login', component: Login},
{path: '/register', component: Register}
]
});

// 2. 在需要路由跳转的组件内留坑
var App = {
template: `
<div>
<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<!-- 留坑 -->
<router-view></router-view>
</div>
`
};

// 3. 在vue配置对象中增加router属性
var vm = new Vue({
el: '#app',
components: {
'app': App
},
template: '<app/>',
router: myRouter
})
</script>
</body>

基本步骤:

  • 通过 new VueRouter声明路由配置对象,在对象中增加routes属性配置路由规则,或者调用配置对象的方法addRoutes
  • vue 的内置组件 <router-view>在需要路由跳转的组件内留坑,用 <router-link> 作为猫点
  • 在vue对象配置中增加 router ,指定我们的路由配置对象;也可以在组件 App 内配置,只要在留坑组件的父组件即可

输入结果:

其中,router-linkto属性可以绑定一个对象,对象用name属性指定具体哪条路由规则,相应的路由对象的规则也要增加name属性,这样就不用每次修改路由路径的时候,去修改多处地方,如下修改代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var myRouter = new VueRouter({
routes: [
{name: 'login', path: '/login', component: Login},
{name: 'register', path: '/register', component: Register}
]
});

var App = {
template: `
<div>
<router-link :to="{name: 'login'}">登陆</router-link>
<router-link :to="{name: 'register'}">注册</router-link>
<!-- 留坑 -->
<router-view></router-view>
</div>
`
};

2. 路由传参

存在两种路由传参方式,一种是query的方式,如#/login/id=1&name=tom;一种是params的方式,如#/register/2/marry,实例代码:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script>
var Login = {
template: '<div><h1>我是登陆页面</h1></div>',
created: function() {
console.log(this.$route.query);
}
};

var Register = {
template: '<div><h1>我是注册页面</h1></div>',
created: function() {
console.log(this.$route.params);
}
};

// 1. 声明路由配置对象
var myRouter = new VueRouter({
routes: [
{name: 'login', path: '/login', component: Login},
{name: 'register', path: '/register/:id/:name', component: Register}
]
});

// 2. 在需要路由跳转的组件内留坑
var App = {
template: `
<div>
<router-link :to="toLoginPath">登陆</router-link>
<router-link :to="toRegisterPath">注册</router-link>
<!-- 留坑 -->
<router-view></router-view>
</div>
`,
data: function() {
return {
toLoginPath: {
name: 'login',
query: {
id: 1,
name: 'tom'
}
},
toRegisterPath: {
name: 'register',
params: {
id: 2,
name: 'marry'
}
}
}
}
};
</script>

结果如下:

  • query 方式不用修改路由规则,params 方式要在原来规则加上参数占位符
  • 在组件内可以通过 this.$route 获取路由到改组件的路由规则对象,注意不是路由配置对象

3. 嵌套路由

假如我们需要在登陆页面分个人登陆和企业登陆,通过/login/person 跳转到个人登陆,通过/login/company 跳转到企业登陆,则需要在登陆页面根据路由另外去挂载个人还是企业的登陆页面,实例代码如下:

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
40
41
42
43
44
45
46
47
48
49
50
51
<script>
var Login = {
template: `<div>
<h1>登陆页面</h1>
<router-view></router-view>
</div>`,
};

var personLogin = {
template: '<div>个人登陆页面</div>'
};

var companyLogin = {
template: '<div>企业登陆页面</div>'
};

// 1. 声明路由配置对象
var myRouter = new VueRouter({
routes: [
{
name: 'login', path: '/login', component: Login,
children: [
{name: 'login.person', path: 'person', component: personLogin},
{name: 'login.company', path: 'company', component: companyLogin}
]
},
]
});

// 2. 在需要路由跳转的组件内留坑
var App = {
template: `
<div>
<router-link :to="{name:'login.person'}">个人登陆</router-link>
<router-link :to="{name:'login.company'}">企业登陆</router-link>
<!-- 留坑 -->
<router-view></router-view>
</div>
`
};

// 4. 在vue配置对象中增加router属性
var vm = new Vue({
el: '#app',
components: {
'app': App
},
template: '<app/>',
router: myRouter
})
</script>

结果如下:

  • 路由规则对象的children 属性表示子路由规则,它也是一个路由规则对象数组
  • 子路由规则对象的path属性是相对路径,也可以加上/表示绝对路径

4. 路由钩子

有时候路由跳转页面需要判断是否有权限,这时就需要用到路由钩子函数beforeEach 跳转前进行权限等处理,如下代码:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script>
var isLogin = false;

var Login = {
template: `<div><h1>登陆页面</h1></div>`,
created: function(){
isLogin = true;
}
};

var Music = {
template: `<div><h1>音乐界面</h1></div>`
}

// 1. 声明路由配置对象
var myRouter = new VueRouter();

myRouter.addRoutes([
{name: 'login', path: '/login', component: Login},
{name: 'music', path: '/music', component: Music, meta: {isChecked: true}}
]);

// 路由钩子函数,校验跳转权限
myRouter.beforeEach(function(to, from, next){
if(!to.meta.isChecked) {
next();
}else {
if(isLogin){
next();
}else {
alert('请先登陆');
next({name: 'login'});
}
}
});

// 2. 在需要路由跳转的组件内留坑
var App = {
template: `
<div>
<router-link :to="{name:'login'}">登陆</router-link>
<router-link :to="{name:'music'}">听音乐</router-link>
<!-- 留坑 -->
<router-view></router-view>
</div>
`
};

// 3. 在vue配置对象中增加router属性
var vm = new Vue({
el: '#app',
components: {
'app': App
},
template: '<app/>',
router: myRouter
})
</script>

上面代码表示在进入音乐界面的时候必须先登陆,不然会重定向到登陆,注意以下几点:

  • 路由规则对象的meta 表示自定义数据,可以在组件内的规则对象this.$route.meta 获取
  • 钩子函数的参数:to 表示跳转到的路由规则对象,from 表示从哪个路由规则对象跳转而来
  • next()表示允许路由对应的组件,next(false) 表示禁止跳转,next([string|Object])则表示重定向到对应的路由