vue-router 是vue框架的前端路由插件,主要是通过监测 onhashChange
事件,在动态挂载不同组件到固定位置。
1. 基本配置
如下代码:
<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-link
的to属性可以绑定一个对象,对象用name属性指定具体哪条路由规则,相应的路由对象的规则也要增加name属性,这样就不用每次修改路由路径的时候,去修改多处地方,如下修改代码:
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
,实例代码:
<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
跳转到企业登陆,则需要在登陆页面根据路由另外去挂载个人还是企业的登陆页面,实例代码如下:
<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
跳转前进行权限等处理,如下代码:
<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])
则表示重定向到对应的路由