vue-cli---路由守卫

组件内的路由守卫---局部`beforRouterEnter() {}`----进入路由前执行的方法案例---拦截，不登陆不能进入购物车，自动跳转到登录界面案例---显示隐藏tabs 全局路由守卫案例---实现权限登录

组件内的路由守卫—局部

beforRouterEnter() {} 进入路由前执行的方法beforRouterLeave() {} 离开路由前执行的方法beforeRouterUpdate() {} 路由更新前执行的方法，如： produce/abc ==> produce/123

beforRouterEnter() {}----进入路由前执行的方法

beforRouterEnter(参数1，参数2，参数3) {}参数1：{router} to 去那个路由参数2：{router} from 从那个路由过来参数3：{function} next next() || next(true) 直接去to中需要去的路由next(false) 阻止跳转next(/login) 跳转转到login页面next 方法必须执行 // 目标 当用户进入到购物车页面前 检查是否登录过 （token） 如果没有则跳转到登录页面 // 进入或者离开路由前做一些额外操作 路由守卫，三种方式 // 1. 组件内部实现，2.路由独享实现，3.全局路由守卫 export default { // 进入路由前执行的方法 /** * @param {route} to 去哪个路由 * @param {route} from 从哪个路由过来 * @param {Function} 判断后去哪个路由 next(false) 阻止跳转 next()||next(true) 进入到to路由 next(/login) 跳转转到login页面 【next 方法必须执行】 * @description beforeRouteEnter 方法里面获取不到当前组件的this * */ beforeRouteEnter(to,from,next) { // 登录放行 if(localStorage.getItem("token")){next()} else{ next("/login?redirect=/cart"); // 没有登录跳转登录页面，登录成功在跳回/cart } } // 离开路由前执行的方法 beforeRouteLeave(){}, // 路由更新前执行的方法 produce/abc produce/123 beforeRouteUpdate(){} }

案例—拦截，不登陆不能进入购物车，自动跳转到登录界面

使用beforeRouteEnter() {}—在需要拦截的地方进行拦截 // 购物车页面 <script> export default { beforeRouteEnter(to,from,next) { // 登录放行 // 判断是否有token，有token说明 if(localStorage.getItem("token")) { next(); }else { // 跳转到登录页面，并且传递参数 next('/login?redirect=/cart'); } } } </script>

案例—显示隐藏tabs

使用：路由独享：beforeEnter(to,from,next) {}使用：局部路由守卫-beforeEnter() {}–在router中的index.js中想要在那里设置路由守卫的额地方使用：beforeRouteLeave() {}–在需要触发的功能文件内进行调用使用：事件总线（组件间传参）-- 进行发送与接收数据 <!-- 详情页面信息，需要隐藏tabs --> <template> <div class="produce"> <h1>产品页面--{{$route.params.id}}</h1> <button @click="$router.go(-1)">返回</button> | <button @click="$router.push('/')">首页</button> | <button @click="$router.replace('/')">首页-replace</button> </div> </template> <script> import Bus from '@/utils/Bus.js' export default{ created(){ // 使用事件总线，在创建之前进行发送事件以及参数 // 这个是为了在刷新了时不会再出现 Bus.$emit("showtabs",false); }, // 使用离开之前进行传递数据 beforeRouteLeave(to,from,next){ // 发送事件，参数 Bus.$emit("showtabs",true); next(); } } </script> 因为需要更改App.vue中的导航的显示与隐藏所以需要App.vue中进行数据的接收 <template> <div id="app"> <router-view class="page"></router-view> <div class="tabs" v-if="isShow"> <router-link class="col" to="/">首页</router-link> <router-link class="col" to="/category">分类</router-link> <router-link class="col" to="/about">星球</router-link> <router-link class="col" to="/cart">购物车</router-link> <router-link class="col" to="/user">我的</router-link> </div> </div> </template> <script> import Bus from '@/utils/Bus.js'; export default{ // 设置数据， data(){return {isShow:true}}, created(){ // 获取数据，事件 Bus.$on("showtabs",$event=>{console.log($event,"showtabs");this.isShow=$event}) } } </script> 再router.js中进行局部设计进入详情页面 通知app.vue隐藏底部栏所以再详情页面的地方进行路由守卫数据的传递 { path: '/produce/:id', name: 'Produce', component: Produce, // 进入详情页面 通知app.vue隐藏底部栏 beforeEnter(to,from,next) { // 使用Bus，发送事件，参数 Bus.$emit("showtabs",false); next(); } },

全局路由守卫

在route文件夹中index.js中进行定义router.beforeEach( (to,from,next) => {})所有的路由导航守卫，全局

案例—实现权限登录

router.beforeEach((to,from,next) => { // 获取登录之后的sessionStorage中的user数据，如果没有，就赋值为{} var user = sessionStorage.getItem("user") || '{}'; // 将获取到的user数据，将数据的字符串变成json数据 user = JSON.parse(user); // 获取需要访问路由的权限信息，如果没有权限，则把权限定义为-1，否则，为空 to.meta.auth===undefined? to.meta.auth = -1:""; // 如果不许需要权限，可以直接访问 if(to.meta.auth <= -1) { next(); }else { // 如果M_ID存在，说明已经登录了， if(user.M_ID) { // 判断一下登录的用户的数据中的权限等级跟设置需要访问的权限等级的差异 if(user.M_Rank >= to.meta.auth) { // 如果权限等级足够，可以访问 next(); }else { // 权限不够 alert("权限不够，请充值"); next("/user"); } }else { // 没有登录，就跳转到登录页面 next("/login?redirect=" + to.path); } next(); } });