独享路由守卫beforeEnter

我们都知道vue中有全局的路由守卫:
beforeEach在任何导航前执行。返回一个删除已注册守卫的函数。和afterEach
事实上在vue中还有一个 独享路由守卫:
beforeEnter:在进入特定于此记录的守卫之前。注意如果记录有重定向属性，则 beforeEnter 无效。
独享路由守卫beforeEnter配置在指定路由中的

const routes = [{path: '/home',name: 'Home',component: Home,meta:{// 只有经过身份验证的用户才能访问isAuth: true,title:"首页"}},{path: '/about',name: 'About',component: About,meta:{ isAuth: false, title:"关于" },children:[{path: '/detail',name: 'Detail',component: Detail,meta:{ isAuth: false, title:"详情" },beforeEnter:(to,from,next) =>{if(to.meta.isAuth){if(localStorage.getItem('user')){next()//调用next才会往下走}}else{alert("无权限")}}}]}
]

独享路由守卫beforeEnter相关推荐

vue2进阶篇：vue-router之“使用独享路由守卫”
文章目录 10.13路由守卫案例:将案例改为"使用独享路由守卫" 完整代码本人其他相关文章链接 10.13路由守卫注意点1: 前置路由守卫或者后置路由守卫中,to指代切换到哪 ...
vue 独享路由守卫
要点: 在路由规则里直接配置beforeEnter 为独享路由守卫 ,只对xinwei有权限控制注意独享路由守卫只有前置,没有后置!!!!!!!!!!!!!!! 要完成后置就可以配置全局的后置路由守 ...
全局路由守卫，独享路由守卫，组件内路由守卫
路由守卫: 1.作用:对路由进行权限控制 2.分类:全局路由守卫,独享路由守卫,组件内路由守卫 3.全局路由守卫:在router=>index.js const routes =[ {path: ...
全局、独享、局部路由守卫
一.创建路由 //创建一个路由器,并暴露 export default new VueRouter({routes: [{path: '/about',component: About},{path: ...
Vue Router路由守卫
全局前置.后置路由守卫 router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import List f ...
vue-cli 初始化创建 vue2.9.6 项目路由守卫、封装axios、vuex
阅读目录 Vue如何封装Axios请求 1 安装axios 2 封装代码 axios 应用方式 Vue 中的路由守卫使用演示 1 全局守卫 2 组件级守卫 3 单个路由独享的守卫 4 官网整个路由守 ...
Vue Router系列之详解路由守卫
文章の目录 1.路由守卫是什么 2.导航守卫分类 2.1.全局守卫 2.1.1.全局前置守卫beforeEach 2.1.2.全局解析守卫beforeResolve(2.5.0 新增) 2.1.3.全 ...
vue2 和 vue3 的路由守卫
vue2 路由守卫: vue-router 路由实现: 路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能. 首先知道有3个参数 to , ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
一.全局守卫 1. router.beforeEach((to,from,next)=>{}) 2. 回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否 ...

独享路由守卫beforeEnter

独享路由守卫beforeEnter相关推荐

最新文章

热门文章