全局路由守卫，独享路由守卫，组件内路由守卫

路由守卫：

1.作用：对路由进行权限控制

2.分类：全局路由守卫，独享路由守卫，组件内路由守卫

3.全局路由守卫：在router=>index.js

 const routes =[ {path: '/test',name: 'test',component: () => import('../views/Test.vue'),meta:{isAuth:true,title:'测试'},}{path: '/testt',name: 'testt',component: () => import('../views/Testt.vue'),meta:{isAuth:false,  //是否需要权限校验title:'新闻',  //用于修改网页标题}},]// 全局前置路由守卫：初始化时执行、每一次路由切换之前调用
router.beforeEach((to,from,next)=>{console.log(to,from);  //to 和 from都是对象// next()  //没有next所有的路由跳转都无效if(to.meta.isAuth){  //判断是否需要鉴权，就不用to.path === '/home/news' || to.path === '/home/msg'if(localStorage.getItem('school')==='atguigu'){  //权限控制的具体规则next()}else{alert('暂无权限查看')}}else{next()}
})
// 全局后置路由守卫：初始化时执行、每一次路由切换之后调用
router.afterEach((to,from)=>{console.log(to,from);document.title = to.meta.title || "网页标题"
})

4.独享路由守卫：

  {path: '/test',name: 'test',component: () => import('../views/Test.vue'),meta:{isAuth:true,title:'测试'},//独享路由守卫（注意：没有独享后置路由守卫，他可以配合全局后置路由守卫）beforeEnter: (to, from, next) => {if(to.meta.isAuth){  //判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){  //权限控制的具体规则next()}else{alert('暂无权限查看')}}else{next()}}},

5.组件内路由守卫：

组件内路由守卫和全局前置后置守卫还不一样，组件内守卫包括进入组件之前调用beforeRouteEnter和离开组件时调用beforeRouteLeave,这里的离开组件时并不是全局后置路由守卫，而是指，当前组件被切换到其他组件时。

router=>index.js

  {path: '/void',name: 'void',component: () => import('../views/Void.vue'),meta:{isAuth:ture,  //是否需要权限校验title:'新闻',  //用于修改网页标题}},

views=>Void.vue

<script>
import Category from '@/components/Category.vue'export default {name:'Void',components:{ Category},//通过路由规则，进入改组件时被调用beforeRouteEnter(to,from,next){console.log('beforeRouteEnter',to,from);//to一定是本组件的路由if(to.meta.isAuth){  //判断是否需要鉴权，就不用to.path === '/home/news' || to.path === '/home/msg'if(localStorage.getItem('school')==='atguigu'){  //权限控制的具体规则next()}else{alert('暂无权限查看')}}else{next()}},//通过路由规则，离开该组件时被调用beforeRouteLeave(){console.log('beforeRouteLeave',to,from); //from一定是本组件的路由next()}}
</script>

注释：什么时通过路由规则：通过切换地址栏中的路径，而不是直接挂载到APP中首次加载时。

全局路由守卫，独享路由守卫，组件内路由守卫相关推荐

当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题
当使用this.$router.back()或者this.$router.go(-1)返回上一页时,搭配组件内路由守卫,屏幕闪烁和跳转页面错误问题问题描述:项目有这个需求,当页面的输入框内容填完之后 ...
vue路由跳转子组件_vue-router之路由钩子（组件内路由钩子必须在路由组件调用，子组件没用）...
模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...
Vue Router 组件内的守卫、导航解析流程
可以在路由组件内直接定义路由导航守卫(传递给路由配置的) 可用的配置 API beforeRouteEnter 在渲染该组件的对应路由被验证前调用. 此时不能获取组件实例 this , 因为当守卫执行 ...
vue路由安全守卫（组件内路由守卫）
组件内部的路由守卫基本形式: export default {name: "Cart",beforeRouteEnter(to, from, next) {// 进入当前组件当 ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
Vue中路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
一.全局守卫 1. router.beforeEach((to,from,next)=>{}) 2. 回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否 ...
全局、独享、局部路由守卫
一.创建路由 //创建一个路由器,并暴露 export default new VueRouter({routes: [{path: '/about',component: About},{path: ...
vue2进阶篇：vue-router之“使用独享路由守卫”
文章目录 10.13路由守卫案例:将案例改为"使用独享路由守卫" 完整代码本人其他相关文章链接 10.13路由守卫注意点1: 前置路由守卫或者后置路由守卫中,to指代切换到哪 ...

全局路由守卫，独享路由守卫，组件内路由守卫

路由守卫：

全局路由守卫，独享路由守卫，组件内路由守卫相关推荐

最新文章

热门文章