路由守卫(全局守卫,局部守卫,组件内守卫)
路由守卫
作用:对路由进行权限控制
分类:全局守卫、独享守卫、组件内守卫
全局守卫:
//全局前置守卫:初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next)=>{console.log('beforeEach',to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则next() //放行}else{alert('暂无权限查看')// next({name:'guanyu'})}}else{next() //放行} })//全局后置守卫:初始化时执行、每次路由切换后执行 router.afterEach((to,from)=>{console.log('afterEach',to,from)if(to.meta.title){ document.title = to.meta.title //修改网页的title}else{document.title = 'vue_test'} })
独享守卫:
beforeEnter(to,from,next){console.log('beforeEnter',to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem('school') === 'atguigu'){next()}else{alert('暂无权限查看')// next({name:'guanyu'})}}else{next()} }
组件内守卫:
//进入守卫:通过路由规则,进入该组件时被调用 beforeRouteEnter (to, from, next) {}, //离开守卫:通过路由规则,离开该组件时被调用 beforeRouteLeave (to, from, next) {}
路由器的两种工作模式
- 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
- hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
- hash模式:
- 地址中永远带着#号,不美观 。
- 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
- 兼容性较好。
- history模式:
- 地址干净,美观 。
- 兼容性和hash模式相比略差。
- 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
路由守卫(全局守卫,局部守卫,组件内守卫)相关推荐
- Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫 官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
- Vue中 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫 官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
- Vue 路由 导航守卫(全局守卫、路由独享守卫、组件内守卫)
一.全局守卫 1. router.beforeEach((to,from,next)=>{}) 2. 回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否 ...
- vue3:路由守卫(全局守卫、路由独享守卫、组件内守卫)
router.js:全局守卫 import {createRouter,createWebHashHistory } from 'vue-router'// 省略了routes 中的路由规则 cons ...
- 导航守卫之组件内守卫及后置钩子
一.路由守卫 1.只有点击路由Admin时才会打印消息,并处于点击前的页面 2.只有点击路由Admin时才会打印消息,显示的是点击后的页面:但如果是next(false)则页面不会跳转 3.路由独享守 ...
- ts写法vue组件内守卫beforeRouteLeave不生效问题
解决办法 需要加上下面一行代码 Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate' ...
- 全局路由守卫,独享路由守卫,组件内路由守卫
路由守卫: 1.作用:对路由进行权限控制 2.分类:全局路由守卫,独享路由守卫,组件内路由守卫 3.全局路由守卫:在router=>index.js const routes =[ {path: ...
- 路由守卫的几种方法、全局守卫、路由独享守卫、组件内部守卫
路由独享守卫,守的是path 组件内部守卫,守的是component 全局守卫 // src/router/index.js1.前置钩子router.beforeEach((to, from, nex ...
- 当使用this.$router.back()或者this.$router.go(-1)返回上一页时,搭配组件内路由守卫,屏幕闪烁和跳转页面错误问题
当使用this.$router.back()或者this.$router.go(-1)返回上一页时,搭配组件内路由守卫,屏幕闪烁和跳转页面错误问题 问题描述:项目有这个需求,当页面的输入框内容填完之后 ...
最新文章
- 为什么 Python被Google选为TensorFlow的开发语言呢?使用 Python比C++语言进行机器学习有什么优势?
- Spring 2.5中文版手册
- 总结mysql的基础语法_mysql 基础sql语法总结 (二)DML
- hdfs 数据迁移_基于 JindoFS+OSS 构建高效数据湖
- java中如何上送list集合_如何使用java中的list集合
- 黑马程序员—————— 随机访问流
- NPM 上传自己的包
- MySQL(10)-----多表创建及描述表关系(一对多的分析和实现)
- 大一java实训报告1500字_java实训报告总结范文
- 【verilog】 AB相旋转编码器驱动(fpga,正交编码器,霍尔编码器驱动)
- mysql自动转账_mysql事务处理(银行转账实例)
- html页面常见布局
- vue cli 构架vux移动端模板
- 第三阶段应用层——1.10 数码相册—main_page主界面的显存管理、页面规划、输入控制
- 巴勒斯坦富有_使会议富有成效
- java项目有个x_GitHub - somnl/X-SpringBoot: X-SpringBoot是一个轻量级的Java快速开发平台,能快速开发项目并交付【接私活利器】...
- Oracle、聚石塔
- 英语从句(英语兔学习笔记)
- 使用minikube快速部署k8s集群
- BF、KMP、BM、Sunday算法讲解