Vue2(十五):replace属性、编程式路由导航、缓存路由组件、路由组件独有钩子、路由守卫、history与hash

一、router-link的replace属性

1、作用:控制路由跳转时操作浏览器历史记录的模式
2、浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push
3、如何开启replace模式:<router-link replace .......>News</router-link>, 加一个replace即可

理解:

如果你用的是默认的push,你点击进入到下一个路由的时候可以返回到上一个路由
如果你用的是replace,你点击进入到下一个路由的时候,浏览器左上角不会有返回上一步

二、编程式路由导航 

1.作用

不借助<router-link> 实现路由跳转,让路由跳转更加灵活,主要是用$router的两个api pushreplace,来实现路由跳转,push是默认带缓存,replace是覆盖缓存 

2.用法

//$router的两个API
this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}
})this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}
})
// 点了以后浏览器的前进后退操作
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退,5前进5步,-3后退3步

3.案例

三、 缓存路由组件

1.作用

让不展示的路由组件保持挂载,不被销毁(比如切换时要保留表单数据)。

2.用法

在放router-view标签的地方,包边包一个<keep-alive></keep-alive>,不加include默认这里边的组件都保持挂载,加include后边跟要挂载的组件名字。

// 缓存一个用字符串
<keep-alive include="News"> <router-view></router-view>
</keep-alive>// 缓存多个路由组件用 数组 (使用 `v-bind`) 
<keep-alive :include="['News', 'Message']"><router-view></router-view>
</keep-alive>

注意:缓存的名字是组件名!!!在需要被缓存组件的外侧包裹keep-alive!!!不要去被缓存组件的template里边包!!(比如要缓存news组件,就要去Home显示区里面包keep-alive,而不是news里面。)

四、路由组件独有的两个生命周期钩子

1.作用

路由组件所独有的两个钩子,用于捕获路由组件的激活状态。

2.名字

(1)activated 路由组件被激活时触发。(2)deactivated 路由组件失活时触发。

(3)这里提一嘴,除了这些钩子,还有个钩子是nextTick,是在页面挂载完且数据放到页面上后执行的钩子

3.案例

还记得之前做的那个字体闪烁案例吗?在这里再搞一遍,搞在News组件里,循环变化透明度,但是你想离开这个选项卡时让定时器停,就要走销毁流程,但是News里面的input输入框数据要保留,又不能被销毁。

上面这种情况就很尴尬了,如果想要实现组件出现时开启定时器,组件切换时关闭定时器且保留数据,就要使用两个新的生命周期钩子,是路由组件独有的钩子:

<template><ul><li :style="{opacity}"></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}},activated () {console.log('news组件激活了');this.timer = setInterval(() => {this.opacity -= 0.01if (this.opacity <= 0) this.opacity = 1}, 16)},deactivated () {console.log('news组件失活了');clearInterval(this.timer)}//   beforeDestroy() {//   console.log('news即将被销毁了');//   clearInterval(this.timer)// },// mounted() {//   this.timer = setInterval(() => { //     this.opacity -= 0.01//     if (this.opacity <= 0) this.opacity = 1 //   }, 16)// },
}
</script>

五、路由守卫

1.作用与分类 

作用:对路由进行权限控制(我想让你看哪个,不想让你看哪个)
分类:全局守卫、独享守卫、组件内守卫

2.全局前置路由守卫 

(1)作用:

全局前置守卫:初始化时执行、每次路由切换前执行。

(2)用法:

使用下面的api,有三个参数,分别是to到哪里去,from从哪里来,next下一步(放行)

router.beforeEach((to,from,next)=>{ })

 (3)案例

比如我要设置只有本地存储中school为atguigu的可以查看新闻和消息,那就要在前置路由守卫中设置,如果符合条件,才能放行。

 index.js

// 全局前置路由守卫 ,初始化时,或每一次路由切换之前都会调用一个函数
router.beforeEach((to, from, next) => {console.log("前置路由守卫",to,from);//to是往哪去的对象,from的从哪来的对象,都包括name和path// if(to.name==="xinwen" || to.name==="xiaoxi") 如果用name写法,上面就要配置好name// if(to.path === '/home/news' || to.path === '/home/message'){if(to.meta.isAuth){//判断是否需要鉴权,在每个路由里面配置metaif(localStorage.getItem('school')==='atguigu'){next()//放行}else{alert('学校不对无权查看')}}else{next()}}),

3.全局后置路由守卫 

 (1)作用

全局后置守卫:初始化时执行、每次路由切换后执行

(2)用法

使用下面的api,有两个参数,分别是to到哪里去,from从哪里来

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

(3)案例

比如我要设置不同的模块显示不同的网页title标题,那么就要在等进入该模块成功后再设置,也就是要搞在全局后置守卫中会更简单。

// 全局后置路由守卫,初始化时,或每一次路由切换之后都会调用一个函数
router.afterEach( (to,from) => {console.log("后置路由守卫",to,from);document.title=to.meta.title || '椰果'
})

4.独享路由守卫 

(1)作用

独享路由守卫:某一个路由单独享用的守卫

(2)用法

router.beforeEnter((to,from,next)=>{ })

注意:独享路由只有beforeEnter,没有afterEnter,但可以配合全局后置守卫使用

(3)使用

 比如只需要news鉴权

                    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()}}

 5.组件内路由守卫

(1)作用

在组件内写这个 组件内守卫,该组件独有的路由守卫

(2)用法

(1)进入组件时
beforeRouteEnter(to, from, next) {}必须通过路由规则进入(你得点啊),写组件标签进入不行,而且是进入路由组件时调用(相当于前置路由守卫),to为当前组件

(2)离开组件时
beforeRouteLeave(to, from, next) {}你得触发路径的变化,前端浏览器监测到了才允许你离开,时离开组件时调用这个函数,在后置路由守卫之后

(3)使用

about.vue

// 组件内路由守卫beforeRouteEnter(to, from, next){console.log('组件内进入路由守卫',to,from)if(to.meta.isAuth){//判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对,无权限查看!')}}else{next()}},beforeRouteLeave(to, from, next)  {console.log('组件内离开路由守卫', to, from)next()}
}

六、路由器的两种工作模式 

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

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

3.hash模式:

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

4.history模式:

1.地址干净,美观。2.兼容性和hash模式相比略差。3.应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。

可以这样更改模式;

// mode:'history',mode:'hash',//默认hash,hash会有#/,不会发请求给服务器,而history会

vue2就结束啦,接下来学习vue3,然后会做两个关于vue3的项目。加油!

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

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

相关文章

【40分钟速成智能风控8】智能反欺诈模型2

目录 ​编辑 智能反欺诈模型 图计算 智能信用风险模型 专家模型 逻辑回归 决策树 集成树 深度神经网络 循环神经网络 智能反欺诈模型 图计算 图计算&#xff08;Graph Computing&#xff09;是以关联图谱为基础引申出来的一类算法的统称&#xff0c;主要解决了图数…

windows linux服务器 以及Azure平台 密码策略配置

密码策略配置 windows 服务器Ubuntu 服务器安装libpam-pwquality密码质量检查库设置密码过期的天数密码策略限制使用过去使用过的密码 centos 7 服务器设置密码过期的天数设置最小密码长度限制使用过去使用过的密码 Azure云默认密码策略 windows 服务器 WinR或右键开始—运行—…

头歌-机器学习 第12次实验 Adaboost算法

第1关&#xff1a;什么是集成学习 任务描述 本关任务&#xff1a;根据本节课所学知识完成本关所设置的选择题。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.什么是集成学习。 什么是集成学习 集成学习方法是一种常用的机器学习方法&#xff0c;分为b…

Vue2.x实现商城购物车

1.实现购物车页面 在页面中显示购物车中的商品信息&#xff0c;并能进行数量增减及商品删除操作&#xff0c;购物车中金额也随商品数量的变化而变化 2.创建cart.html页面 创建cart.html页面&#xff0c;在其中创建Vue实例&#xff0c;实例中首先准备一些商品信息以供显示&a…

天软特色因子看板 (2024.4 第3期)

该因子看板跟踪天软特色因子A05005(近一月单笔流出金额占比(%)&#xff0c;该因子为近一月单笔流出金额占比(% 均值因子&#xff0c;用以刻画下跌时的 单成交中可能存在的抄底现象 今日为该因子跟踪第3期&#xff0c;跟踪其在SH000852 (中证1000) 中的表现&#xff0c;要点如下…

微信小程序转盘抽奖

场景&#xff1a; 在微信小程序里面开展抽奖活动使用转盘抽奖&#xff1b;类似下图&#xff08;图片来自百度&#xff09; 方法&#xff1a; 使用lukcy-canvas组件 在 微信小程序 中使用 | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫…

Dolphinscheduler单机部署

目录 概述实践二进制包前置准备工作解压并启动 Dolphinscheduler登录 Dolphinscheduler启停服务配置数据库 结束 概述 Standalone仅适用于 Dolphinscheduler 的快速体验 实践 官网 官网standalone 二进制包 二进制包&#xff1a;在下载页面下载 Dolphinscheduler 二进制包…

IO流【 文件字符输入、出流;带缓冲区的字符输入、出流;对象流】

day36 IO流 字符流继承图 字符流 继day35 应用场景&#xff1a;操作纯文本数据 注意&#xff1a;字符流 字节流编译器 编译器&#xff1a;可以识别中文字符和非中文字符&#xff0c;非中文字符获取1个字节&#xff08;一个字节一个字符&#xff09;&#xff0c;编译器会根据…

深入浅出Golang image库:编写高效的图像处理代码

深入浅出Golang image库&#xff1a;编写高效的图像处理代码 引言image库概览图像处理基础概念image库的主要组成和功能image接口图像格式的支持color模型 结论 图像的基本操作创建图像新图像的创建从文件加载图像 图像的保存与导出图像的颜色和像素处理绘制基本形状和文字 高级…

【开源社区】openEuler、openGauss、openHiTLS、MindSpore

【开源社区】openEuler、openGauss、openHiTLS、MindSpore 写在最前面开源社区参与和贡献的一般方式开源技术的需求和贡献方向 openEuler 社区&#xff1a;开源系统官方网站官方介绍贡献攻略开源技术需求 openGauss 社区&#xff1a;开源数据库官方网站官方介绍贡献攻略开源技术…

数据结构(三)----栈和队列

目录 一.栈 1.栈的基本概念 2.栈的基本操作 3.顺序栈的实现 •顺序栈的定义 •顺序栈的初始化 •进栈操作 •出栈操作 •读栈顶元素操作 •若使用另一种方式: 4.链栈的实现 •链栈的进栈操作 •链栈的出栈操作 •读栈顶元素 二.队列 1.队列的基本概念 2.队列的基…

关于ABP 新增表,dbfirst模式

下面的代码是基于abp生成的项目&#xff0c;项目名&#xff1a;Store 1.在Domain结尾的项目中通过EF工具生成数据实体&#xff1a; Scaffold-DbContext Data Source服务器IP;Initial Catalog数据库;User Idsa;Password密码;EncryptFalse; Microsoft.EntityFrameworkCore.SqlS…

Java基础_15集合及其方法

今天的内容 1.集合 1.集合【重点】 1.1为什么使用集合 集合和数组是一样的都是用来存储数据的&#xff01;&#xff01;&#xff01; 真实的开发的时候&#xff0c;使用的是集合不是数组&#xff0c;为啥&#xff1f; 数组存数据: ​ 1.数组的容量是固定的 ​ 2.数组封装的方法…

慢品人间烟火色,闲观万事岁月长

小女孩的衣柜里&#xff0c;怎能缺少一套别致的新中式穿搭&#xff1f;让我们的小公主在时尚与传统中寻找平衡 演绎属于自己的中国风魅力精致的小立领&#xff0c;淡淡的文艺复古气息 上衣系带设计&#xff0c;外加一层高透轻纱穿上身如亭亭玉立的大小姐整个人仿佛笼罩了一层…

【docker】之linux写shell脚本备份线上数据库(备份为dump文件)

目录 1. SH文件1.1 SH文件示例1.2 文件解释1.3 .sh文件执行 2. 备份线上数据库的.sh文件2.1 文件命令解析 3. 命令执行4. 线下dump文件的恢复与备份 环境&#xff1a;linux容器&#xff1a;docker 1. SH文件 SH文件通常指的是 Shell 脚本文件&#xff0c;文件后缀名为.sh&…

IP查询在追踪网络攻击源头中的应用

随着网络攻击事件的不断增加&#xff0c;追踪攻击源头成为网络安全领域的重要任务之一。IP查询技术通过分析网络流量中的IP地址&#xff0c;可以帮助确定攻击的来源。本文将探讨IP查询在追踪网络攻击源头中的应用&#xff0c;包括其原理、方法以及实际案例分析。 IP地址查询&a…

比特币减半后 牛市爆发

作者&#xff1a;Arthur Hayes of Co-Founder of 100x 编译&#xff1a;Qin jin of ccvalue (以下内容仅代表作者个人观点&#xff0c;不应作为投资决策依据&#xff0c;也不应被视为参与投资交易的建议或意见&#xff09;。 Ping PingPing&#xff0c;我的手机发出的声音&…

Linux CentOS 安装 MySQL 服务教程

Linux CentOS 安装 MySQL 服务教程 1. 查看系统和GNU C库(glibc)版本信息 1.1 查询机器 glibc 版本信息 glibc&#xff0c;全名GNU C Library&#xff0c;是大多数Linux发行版中使用的C库&#xff0c;为系统和应用程序提供核心的API接口。在Linux系统中&#xff0c;特别是在…

js 数组 按列循环二维数组

期待效果&#xff1a; 核心代码&#xff1a; //js function handle(array) {var result [];for (let i 0; i < array[0].length; i) {var item []; for (let j 0; j < array.length; j) {item.push(array[j][i])} result.push(item);} return result; } 运行代码&a…