一、需求
正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航
。即路由改变时,需要经过"守卫"
的检查,判断能不能跳转,或者应该跳转去哪儿。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。。最常使用的就是跳转页面前,判断用户是否登录,如果用户已经登录,则直接跳转,否则跳转到登录界面。
在跳转到购物车或者我的页面时,判断是否登录,没有登录则跳转到登录界面。
二、实现:
在路由配置中,为Me新添加一个默认子路由,即代表Me中子路由默认显示的组件为用户信息。
显然用户如果没有登录,那么就应该显示登录或者注册组件,设置路由守卫:
这里值得注意的时:这个守卫只拦截了“/me”和“/goodcar”的跳转,而"/me"的子路由“/me/login”和“/me/register”并不受影响。
将Me.vue:
<template>
<div class="about">
<h1>这是我的界面!</h1>
<div id="nav" v-if="!isLogin">
<router-link to="/me/login">登录</router-link> |
<router-link to="/me/register">注册</router-link>
</div>
<!-- -->
<router-view></router-view>
</div>
</template>
<script>
export default {
data (){
return{
isLogin: false
}
},
created() {
if(localStorage.getItem("username")){
this.isLogin = true
}
}
}
</script>
即登录以后便隐藏导航超链接。
三、效果:
浏览器中没有localStrorage时,点击购物车和我的导航,直接跳转到登录:
浏览器中存在localStorage时:
跳转到个人用户资料界面,而且登录和注册导航也隐藏了。在正式的项目中,用户的登录状态也可以放在vuex中,方便在其他地方使用。
1、全局路由守卫
上面将守卫放在router的配置文件index.js文件中,那么相当于全局使用了这个路由守卫,这就是全局路由(beforeEach
),基本格式:
router.beforeEach((to, from, next) => {
// ...
})
2、路由独享守卫
还有单个路由使用的守卫,也就是在定义一个路由的时候就给他配置一个守卫(beforeEnter):
{
path: '/me',
component: Me,
beforeEnter: (to, from, next) => {
// ...
}
}
3、组件内路由守卫
组件内路由守卫,与全局组件作用类似,但是作用范围仅仅是在当前组件中:
export default{
beforeRouteEnter(to,from,next){
// 不能获取组件实例 `this`,因为当守卫执行前,组件实例还没被创建。
},
beforeRouteUpdate(to,from,next){
// 在当前路由改变,但是该组件被复用时调用,通常是访问当前路由的参数改变,组件复用。
},
beforeRouteLeave(to,from,next){
// 可以访问组件实例 `this`
}
}