vue2进阶篇:vue-router之“使用独享路由守卫”
文章目录
- 10.13路由守卫
- 案例:将案例改为“使用独享路由守卫”
- 完整代码
- 本人其他相关文章链接
10.13路由守卫
注意点1:
前置路由守卫或者后置路由守卫中,to指代切换到哪个路由组件,from指代从哪里来的路由组件,next指代下一个路由组件是否放行显示
注意点2:
如果想实现路由组件的to属性添加自定义属性用于权限判断,必须放在meta元数据属性中,meta就是用来存放自定义属性的,比如代码中的to.meta.isAuth,其中isAuth就是用来判断当前路由组件是否用于授权校验。
注意点3:
问题:判断路由组件是否需要鉴权,为啥不使用name属性,而要自定义isAuth属性?
答案:如果使用name属性,那么if条件判断就要写好多好多的判断,而使用isAuth属性就简单方便许多。
使用name属性
if(to.name === ‘xinwen’ || to.name === ‘xiaoxi’ || to.name === ‘xiangqing’){ //判断是否需要鉴权
使用isAuth属性
if(to.meta.isAuth){ //判断是否需要鉴权
注意点4:
如果想使用全局前置/后置路由守卫,路由配置文件index.js中不能直接暴露不然无法生效,要创建一个路由并配置鉴权规则后再暴露
错误写法:
//创建并暴露一个路由器
export default new VueRouter({...
})
正确写法:
//创建并暴露一个路由器
const router = new VueRouter({...
})//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{...
})//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{...
})export default router
注意点5:
问题:独享路由守卫是啥?
答案:就是某一个路由单独享有的路由守卫
注意点6:
只有前置独享路由守卫,没有后置。
注意点7:
问题:组件内路由守卫是啥?
答案:就是在单个组件内定义些路由守卫的东西。
注意点8:
问题:组件内路由守卫可以理解为前置和后置路由守卫吗?
答案:不能。
区别点1:因为组件内路由守卫,指代进入该组件和离开该组件时使用,强调“进入和离开”的动作,而全局路由守卫才强调“前置和后置”的动作。
区别点2:全局路由守卫的前置/后置,都会执行,而组件内路由守卫beforeRouteEnter一定会执行,但如果不离开,那么beforeRouteLeave就不会执行。
案例:将案例改为“使用独享路由守卫”
要求:home和about路由组件可以随意展示,而news和message路由组件需要判断缓存中key为school,value的值是否为atguigu,是则放行,不是则弹窗提示无权限;同时切换路由组件是title标题也进行切换。
改动的地方只在路由配置文件index.js中配置独享路由守卫。
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:true,title:'新闻'},
beforeEnter: (to, from, next) => {console.log('独享路由守卫',to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对,无权限查看!')}}else{next()}
}
完整代码
完整项目路径
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:'#app',render: h => h(App),router:router
})
App.vue
<template><div><div class="row"><Banner/></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html中我们使用a标签实现页面的跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a> --><!-- <a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template><script>import Banner from './components/Banner'export default {name:'App',components:{Banner}}
</script>
index.js
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建并暴露一个路由器
const router = new VueRouter({routes:[{name:'guanyu',path:'/about',component:About,meta:{title:'关于'}},{name:'zhuye',path:'/home',component:Home,meta:{title:'主页'},children:[{name:'xinwen',path:'news',component:News,meta:{isAuth:true,title:'新闻'},beforeEnter: (to, from, next) => {console.log('独享路由守卫',to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对,无权限查看!')}}else{next()}}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth:true,title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{isAuth:true,title:'详情'},//props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:'hello'}//props的第二种写法,值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件。// props:true//props的第三种写法,值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:'hello'}}}]}]}]
})//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
/* router.beforeEach((to,from,next)=>{console.log('前置路由守卫',to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对,无权限查看!')}}else{next()}
}) *///全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{console.log('后置路由守卫',to,from)document.title = to.meta.title || '硅谷系统'
})export default router
About.vue
<template><h2>我是About的内容</h2>
</template><script>export default {name:'About',/* beforeDestroy() {console.log('About组件即将被销毁了')},*//* mounted() {console.log('About组件挂载完毕了',this)window.aboutRoute = this.$routewindow.aboutRouter = this.$router}, */}
</script>
Home.vue
<template><div><h2>Home组件内容</h2><div><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><!-- 缓存多个路由组件 --><!-- <keep-alive :include="['News','Message']"> --><!-- 缓存一个路由组件 --><keep-alive include="News"><router-view></router-view></keep-alive></div></div>
</template><script>export default {name:'Home',/* beforeDestroy() {console.log('Home组件即将被销毁了')}, *//* mounted() {console.log('Home组件挂载完毕了',this)window.homeRoute = this.$routewindow.homeRouter = this.$router}, */}
</script>
News.vue
<template><ul><li :style="{opacity}">欢迎学习Vue</li><li>news001 <input type="text"></li><li>news002 <input type="text"></li><li>news003 <input type="text"></li></ul>
</template><script>export default {name:'News',data() {return {opacity:1}},// beforeDestroy() {// console.log('News组件即将被销毁了')// clearInterval(this.timer)// },// mounted(){// this.timer = setInterval(() => {// console.log('@')// this.opacity -= 0.01// if(this.opacity <= 0) this.opacity = 1// },16)// },activated() {console.log('News组件被激活了')this.timer = setInterval(() => {console.log('@')this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16)},deactivated() {console.log('News组件失活了')clearInterval(this.timer)},}
</script>
Message.vue
<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带params参数,to的字符串写法 --><!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> --><!-- 跳转路由并携带params参数,to的对象写法 --><router-link :to="{name:'xiangqing',query:{id:m.id,title:m.title}}">{{m.title}}</router-link><button @click="pushShow(m)">push查看</button><button @click="replaceShow(m)">replace查看</button></li></ul><hr><router-view></router-view></div>
</template><script>export default {name:'Message',data() {return {messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}},methods: {pushShow(m){this.$router.push({name:'xiangqing',query:{id:m.id,title:m.title}})},replaceShow(m){this.$router.replace({name:'xiangqing',query:{id:m.id,title:m.title}})}},beforeDestroy() {console.log('Message组件即将被销毁了')},}
</script>
Detail.vue
<template><ul><li>消息编号:{{id}}</li><li>消息标题:{{title}}</li></ul>
</template><script>export default {name:'Detail',props:['id','title'],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
</script>
Banner.vue
<template><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2><button @click="back">后退</button><button @click="forward">前进</button><button @click="test">测试一下go</button></div></div>
</template><script>export default {name:'Banner',methods: {back(){this.$router.back()// console.log(this.$router)},forward(){this.$router.forward()},test(){this.$router.go(3)}},}
</script>
Index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>硅谷系统</title>
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body>
</html>
bootstrap.css网上搜一个拷贝进来,这个上前行代码就不拷贝过来了
结果展示:
本人其他相关文章链接
1.《vue2进阶篇:路由》第10章:vue-router,包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件
2.vue2进阶篇:安装路由
3.vue2进阶篇:vue-router之基础路由
4.vue2进阶篇:vue-router之嵌套(多级)路由
5.vue2进阶篇:vue-router之路由的query参数
6.vue2进阶篇:vue-router之命名路由
7.vue2进阶篇:vue-router之路由的params参数
8.vue2进阶篇:vue-router之路由的props配置
9.vue2进阶篇:vue-router之router-link的replace属性
10.vue2进阶篇:vue-router之编程式路由导航
11.vue2进阶篇:vue-router之缓存路由组件
12.vue2进阶篇:vue-router之两个新的生命周期钩子
13.vue2进阶篇:vue-router之使用“全局路由守卫”
14.vue2进阶篇:vue-router之“使用独享路由守卫”
15.vue2进阶篇:vue-router之“使用组件内路由守卫”
16.vue2进阶篇:vue-router之路由的2种工作模式
vue2进阶篇:vue-router之“使用独享路由守卫”相关推荐
- 独享路由守卫beforeEnter
我们都知道vue中有全局的路由守卫: beforeEach在任何导航前执行.返回一个删除已注册守卫的函数.和afterEach 事实上在vue中还有 一个 独享路由守卫: beforeEnter:在进 ...
- vue 独享路由守卫
要点: 在路由规则里直接配置beforeEnter 为独享路由守卫 ,只对xinwei有权限控制 注意独享路由守卫只有前置,没有后置!!!!!!!!!!!!!!! 要完成后置就可以配置全局的后置路由守 ...
- 全局路由守卫,独享路由守卫,组件内路由守卫
路由守卫: 1.作用:对路由进行权限控制 2.分类:全局路由守卫,独享路由守卫,组件内路由守卫 3.全局路由守卫:在router=>index.js const routes =[ {path: ...
- Vue Router系列之详解路由守卫
文章の目录 1.路由守卫是什么 2.导航守卫分类 2.1.全局守卫 2.1.1.全局前置守卫beforeEach 2.1.2.全局解析守卫beforeResolve(2.5.0 新增) 2.1.3.全 ...
- vue2进阶篇:vue-router之路由的2种工作模式
文章目录 10.14路由的2种工作模式 本人其他相关文章链接 10.14路由的2种工作模式 注意点1: 问题:路由的2种工作模式 答案:hash模式和history模式.其中hash模式就是url路径 ...
- vue2进阶篇:vue-router之路由的params参数
文章目录 10.7路由的params参数 案例:将案例改为"路由的params参数" 完整代码 本人其他相关文章链接 10.7路由的params参数 注意点1: 跳转路由并携带pa ...
- vue router返回到指定的路由
vue router返回到指定的路由 一.项目场景 二.问题描述 三.原因分析 四.解决方案 一.项目场景 项目场景:示例:A(商品详情)--B(商品购买页面)-C(支付成功页面)--D(订单页面) ...
- vue router连续点击多次路由报错根本原因和解决方法
原因: vue-router 升级到 3.1.x 后,重复点击导航时,控制台出现报错 ,vue router ≥ v3.1 后 ,回调形式改成 promise api 了,返回的是 promise,如 ...
- Vue源码 Vue Router(三)matcher 路由匹配器
Vue源码 Vue Router(三)matcher Vue源码 Vue Router(三)matcher matcher createMatcher addRoutes match 总结 单步调试参 ...
最新文章
- C 标准库 - ctype.h之isalnum使用
- 图像处理之一阶微分应用
- KDD 18论文解读 | 斯坦福大学提出全新网络嵌入方法 — GraphWave
- HTML/CSS——float制作页面DEMO
- Oracle ASM 进程之ASMB
- python web框架 多线程_python 简单web框架: Bottle
- C语言学习及应用笔记之四:C语言volatile关键字及其使用
- (二)注册服务提供者
- centos7目录结构
- 《极客学院 --NSAttributedString 使用详解-4-UITextKit 简介》学习笔记(待处理)...
- Linux常用命令汇总及示例
- RDKit入门教程(1)——RDKit 安装 (Win10)
- excel怎么启用宏_利用Excel连接Power BI,实现PPT报告自动输出
- 计算机里的文件弄不到桌面怎么办,电脑文件夹在桌面不显示怎么办
- 数据营销“教父”宋星十年倾心之作,让数据真正赋能企业
- MATLAB App Designer入门实战(一)
- plm服务器 硬件性能,如何对PLM系统进行性能诊断与调优?
- 2003系统服务器防域名报毒,【系统之家】木马病毒无孔不入 win 2003系统也要防木马...
- 沃尔玛在华架构调整计划遭到工会反对
- 计算机网络第二章 物理层练习题(中文带答案解析)
热门文章
- Spring MVC 如何实现RESTFull的 delete和put提交
- 第8章 对象引用、可变性和垃圾回收
- 用计算机弹我的一个道故朋友,我的一个道姑朋友
- CentOS7 安装极点五笔输入法
- 计算机技术+智能化水电站,济南研祥嵌入式技术在水库信息智能化系统中的应用———济南研祥嵌入式技术在水库信息...
- 论文阅读笔记:SCAN: Learning to Classify Images without Labels
- CoreData单表
- 《梦里花落知多少》-三毛
- 飞书机器人python给用户发信息api调用
- 手游传奇代理一个版本大概多少