vue-router路由守卫进阶

vue-router路由守卫进阶

路由守卫,可以想象为古代御前侍卫,路由守卫,则是对路由进行权限控制

分类:全局守卫、独享守卫、组件内守卫

  1. 全局前置-路由守卫

    作用:主要用来鉴权

    用户点击导航区,随后引起路径的改变,前端路由器监测到,进行规则的匹配,在合适的位置呈现组件。

    在这里插入图片描述

    调用时机:初始化时被调用,每次路由切换之前调用

    写法:

    router.beforeEach((to, from, next) => {// 判断当前路由是否需要进行权限控制  if(to.meta.isAuth) {    // 权限控制规则    if(localStorage.getItem("token")){      next() // 放行    }  } else if(to.path == '/home'){    next()  } else {    console.log("暂无权限");  }
    });
    

    参数说明:

    导航钩子的三个参数解析:

    • to:即将要进入的目标路由对象
    • from:当前导航即将要离开的路由对象
    • next:调用该方法后,才能进入下一个钩子
  2. 全局后置守卫

    在一个单页面spa应用中,如果改变网页的标题呢?

    • 网页标题是通过来显示的,但spa只有一个固定的HTML,切换不同的页面时,标题并不会改变
    • 但我们可以通过js来修改的内容,window.document.title=‘新的标题’
    • 在vue项目中,如何修改更合适?

    普通的修改方式:

    • 比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中。
    • 通过mounted声明周期函数,执行对应的代码进行修改即可。
    • 但当页面比较多时,这种方式不容易维护(因为需要在多个页面执行类似的代码)

    有没有更好的方式呢,使用路由后置守卫即可

    路由后置守卫使用说明:

    主要作用:变更页签标题

    调用时机:初始化被调用,每次路由切换之后调用

    写法:

    router.afterEach((to, from) => {document.title = to.meta.title
    })
    

    可以利用afterEach来完成标题的修改。具体实现步骤如下:

    1. 可以在钩子当中定义一些标题,利用meta来定义
    // 定义路由
    const routes = [{path:'/index',component:Home,meta:{title:"首页"}},{path:"/about",component:About,meta:{title:"关于"}}
    ]
    // 利用导航守卫。修改我们的标题
    router.afterEach((to, from) => {document.title = to.meta.title
    })
    
  3. 独享守卫

    对某一个路由单独进行控制的守卫

    比如只对系统配置进行限制

    const routes = [{path: "/system",name: "System",component: () => import(/* webpackChunkName: "system" */ "@/views/System"),beforeEnter: (to, from, next) => {if(to.meta.isAuth) {if(localStorage.getItem("token")){next()}} else {console.log("暂无权限");}}},
    ]
    
  4. 组件内路由守卫

    在组件文件内部写,beforeRouteEnter、beforeRouteLeave

    调用时机:通过路由规则,beforeRouteEnter进入该组件时被调用,beforeRouteLeave离开该组件时被调用

    // 进入守卫,通过路由规则,进入该组件时被调用
    beforeRouteEnter(to, from,next){},
    // 进入守卫,通过路由规则,离开该组件时被调用
    beforeRouteLeave(to,from,next){}
    
  5. keep-alive遇见vue-router

    keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态或避免重新渲染

    • include:字符串或正则表达,只有匹配的组件会被缓存
    • exclude:字符串或正则表达式,匹配的组件都不会被缓存

    router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配的视图组件都会被缓存

    <keep-alive><router-view>// 所有路径匹配到的视图组件会被缓存</router-view>
    </keep-alive>
    
  6. 路由器的两种工作模式,history模式与hash模式

    对于一个Url来说,什么是hash值?#及其后面的内容就是hash值。

    hash值不会包含在HTTP请求中,即:hash值不会带给服务器。

    hash也就是锚点(#),本质上是改变window.loaction的href属性。

    我们可以通过直接复制window.location.hash来改变href,页面不发生刷新

    hash模式:

    • 地址永远带着#号,不美观
    • 如果以后将地址通过第三方手机app分享,app校验严格,则地址会被标记为不合法
    • 兼容性好。

    history模式:

    这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

    当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

    不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

    • 地址干净,美观
    • 兼容性和hash模式相比略差,IE9不兼容(可使用强制刷新处理)
    • 应用部署上线时,需要后端人员支持,解决刷新页面服务端404问题。

    url的hash、h5的history,默认情况下,路径的改变使用的是URL的hash模式,如果希望使用HTML5的history模式,非常简单,进行如下配置即可:

    const router = new VueRouter({routes,mode:'history'
    })
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/136245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kubernetes (k8s)的使用

一、kubernetes 简介 谷歌2014年开源的管理工具项目&#xff0c;简化微服务的开发和部署。 提供功能&#xff1a;自愈和自动伸缩、调度和发布、调用链监控、配置管理、Metrics监控、日志监控、弹性和容错、API管理、服务安全等。官网&#xff1a;https://kubernetes.io/zh-cn…

后入能先出,一文搞懂栈

目录 什么是栈数组实现链表实现栈能这么玩总结 什么是栈 栈在我们日常编码中遇到的非常多&#xff0c;很多人对栈的接触可能仅仅局限在 递归使用的栈 和 StackOverflowException&#xff0c;栈是一种后进先出的数据结构(可以想象生化金字塔的牢房和生化角斗场的狗洞)。 栈&…

KEIL 自己出RTOS了,一天天的搞应用还好意思吗

FuSa Run-Time System (arm.com) 官方的链接放在上面。看了strongerHuang的博客扫到的...真心累了... 扯淡的话到嘴边..不说了。有空得看下。 基于event的调度设计&#xff0c; 能够针对M系列的MCU作一些比较稳定和高效的适配... 能充分利用timer作event调度策略云云... …

洛谷P5731 【深基5.习6】蛇形方阵java版题解

import java.util.Arrays; import java.util.Scanner;// 给出一个不大于9的正整数n&#xff0c;输出nn的蛇形方阵。 public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int[][] a new int[n][n];int total…

【C++】从入门到精通第二弹——类的构造与析构函数

这里写目录标题 类的构造函数类的析构函数 写在最前面的话 ——构造函数和析构函数是两个特殊的成员函数&#xff0c;都没有返回值&#xff0c;构造函数名和类名相同&#xff0c;析构函数名只是在类名前加上 ~ 构造函数主要用来在创建对象时给对象中的数据成员赋值&#xff0c;…

MySQL中表格的自我复制,与复制表格

先创建一个空表&#xff0c;my_tab01 CREATE TABLE my_tab01(id INT ,name VARCHAR(32),sal DOUBLE,job VARCHAR(32),deptno INT); SELECT * FROM my_tab01;准备一张有数据的表格&#xff1a; 将另一张表格的数据插入到my_tab01的表格中&#xff1a; -- 演示如何自我复制 --…

前端项目导入vue和element

1.安装nodejs 下载链接https://cdn.npmmirror.com/binaries/node/v18.18.0/node-v18.18.0-x64.msi 进入cmd 命令行模式 管理员身份运行 输入 &#xff08;node -v&#xff09;能看到版本号 npm config set prefix "C:\Program Files\nodejs" 默认路径 npm config…

乌班图搭建 LAMP

搭建 LAMP&#xff08;Linux、Apache、MySQL、PHP&#xff09;堆栈是在 Ubuntu 上构建 Web 服务器的常见任务。以下是一些步骤&#xff0c;指导如何在 Ubuntu 上搭建 LAMP 环境&#xff1a; 步骤&#xff1a; 更新系统软件包&#xff1a; 在终端中执行以下命令&#xff0c;确…

刚柔相济铸伟业 ——访湖南顺新金属制品科技有限公司董事长张顺新

时代在变&#xff0c;唯初心不改。 精致、谦虚、谨慎、儒雅、温和——他就是张顺新&#xff0c;湖南顺新金属制品科技有限公司、湖南顺新供应链管理有限公司董事长&#xff0c;民建长沙市委常委&#xff0c;民建湖南省环资委副主任&#xff0c;省、市民建企联会常务副会长&…

基于SSM+Vue的随心淘网管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

初步使用ActiveMQ

参考&#xff1a;http://t.csdnimg.cn/DxjMm ActiveMQ的安装 官方的下载地址&#xff1a;http://activemq.apache.org/components/classic/download &#xff08;1&#xff09;运行&#xff1a;解压后&#xff0c;进入bin目录&#xff0c;执行对应版本的 activemq.bat 管理页…

官方Redis视图化工具Redisinsight

一、下载最新版本的 docker pull redislabs/redisinsight mkdir /data/redisinsight docker run -d -u root -p 8001:8001 -v /etc/localtime:/etc/localtime -v /data/redisinsight:/db --restartunless-stopped redislabs/redisinsight:latest 二、浏览器打开 http://192…

自动化测试(Java+eclipse)教程

webdriver环境配置 1.下载chromedriver到本地&#xff08;一定要选择和自己浏览器相对应的版本chromedriver下载地址&#xff09; 2.加入到环境变量path中 webdriver工作原理 创建web自动化测试脚本 1.Maven项目创建 File->New->project->(搜索maven)选择maven pr…

爱家房产网站源码 爱家房产网商业版 微信互动营销整合+手机触屏版+经纪人分销

房产网站源码手机访问自动转手机版修改修复如下&#xff1a; 1&#xff0c;修复手机版首页标题头部名称 2&#xff0c;修复手机版首页频道导航按钮 3&#xff0c;新增手机版广告位置显示方式 4&#xff0c;修复手机版首页内容显示样式 5&#xff0c;手机版头部背景颜色ic…

什么是观察者模式?用 Python 如何实现 Observer(观察者或发布订阅)对象行为型模式?

什么是观察者模式&#xff1f; 观察者模式&#xff08;Observer pattern&#xff09;是一种行为型设计模式&#xff0c;它允许对象之间建立一种一对多的依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;其相关依赖对象都会得到通知并自动更新。 在观察者模式中&am…

Vue3的组合式API介绍,和Vue2生命周期函数的变化

目录 1&#xff0c;setup2&#xff0c;生命周期函数1&#xff0c;为什么删除了 beforeCreate 和 created&#xff1f;2&#xff0c;新增钩子函数 3&#xff0c;compositionAPI 相比于 optionAPI 有哪些优势&#xff1f; Vue3 中新增了 composition API&#xff08;组合式API&am…

三天打鱼两天晒网

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 前言 本系列为选择结构编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 二、题目分析 三、解题 程序运行代码 #include<stdio.h> int main(){int n;scanf("%d",&n);i…

Go 接口:Go中最强大的魔法,接口应用模式或惯例介绍

Go 接口&#xff1a;Go中最强大的魔法,接口应用模式或惯例介绍 文章目录 Go 接口&#xff1a;Go中最强大的魔法,接口应用模式或惯例介绍一、前置原则二、一切皆组合2.1 一切皆组合2.2 垂直组合2.2.1 第一种&#xff1a;通过嵌入接口构建接口2.2.2 第二种&#xff1a;通过嵌入接…

Android 笔记: 字符串截取操作方法

1、Android 截取字符串&#xff0c;返回字符串数组&#xff1a; String str “abcd.efg.123456.hijk.345”; String[] strsstr.split(“.”); 2、将字符串从索引号为3开始截取&#xff0c;一直到字符串末尾&#xff08;索引值从0开始&#xff09;: String str “abcdefghijk…

【应用前沿】360QPaaS 精彩亮相首届中国航空制造设备博览会 | 数智航空

近日&#xff0c;首届“中国航空制造设备博览会”&#xff08;CAEE2023&#xff09;在宁波国际会展中心顺利召开&#xff0c;本届大会以“数智产融 开放发展”为主题&#xff0c;以“新技术、新产品、新服务、新企业”为定位&#xff0c;以特色化、专业化、品牌化、高端化为方向…