vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作


Posted in Javascript onAugust 06, 2020

最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下。

这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客。

需求1:从填写表单A页面跳转到B页面,然后再从B页面返回到A页面,实现A页面的所填的数据保留

一.设置路由缓存:

1.App.vue中加入<keep-alive> 具体代码如下:

<template>
 <div id="app">
 <!--<img src="./assets/logo.png">-->
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive">
  <!-- 这里是会被缓存的视图组件A -->
  </router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件B -->
 </router-view>
 </div>
</template>

2.在路由配置文件index.js里面增加meta标签,代码如下:

export default new Router({
 routes: [
 {
  path: '/',
  name: 'Initinfo',
  component: Initinfo
 },
  {
   path: '/B',
   name:'B',
   component: CredentialsDetails,
   meta:{keepAlive:false}
  },
  {
   path: '/A',
   name:'A',
   component: ASeal,
   meta:{keepAlive:true}
  }

 ]
})

ok,做到这里,就能实现以上需求1。

需求2:在需求1基础上,增加一个需求就是,缓存A表单页面滚动位置,代码如下:

export default new Router({

 //使用keep-alive后,可能存在滚动条问题的解决问题
 mode:'hash',//默认是hash模式 且有history
 scrollBehavior(to,from,savePosition) { // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
  console.log(to) // to:要进入的目标路由对象,到哪里去
  console.log(from) // from:离开的路由对象,哪里来
  console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
  if(savePosition){
   return savePosition;
  }else{
   return {
    x: 0,
    y: 0
   }
  }
 },
 routes: [
  {
   path: '/',
   name: 'Initinfo',
   component: Initinfo
  },
  {
   path: '/B',
   name:'B',
   component: CredentialsDetails,
   meta:{keepAlive:false}
  },
  {
   path: '/A',
   name:'A',
   component: ASeal,
   meta:{keepAlive:true}
  }

 ]
})

需求3:

1.默认显示 A

2. B跳到 A,A 不刷新

3. C跳到 A,A 刷新

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

以上是路由守卫官网,可以参考,下面介绍两个守卫:beforeRouteLeave,beforeRouteEnter

1.在路由的index.js文件,和以上路由一样,设置A页面的meta属性,代码如下:

{
 path: '/A',
 name:'A',
 component: ASeal,
 meta:{keepAlive:true}
 }

2. 在B组件设置 beforeRouteLeave:代码如下:

export default {
 beforeRouteLeave(to, from, next) {
  console.log(to);
  console.log(from)
  // 设置下一个路由的 meta
  to.meta.keepAlive = true; // 让 A 缓存,即不刷新
  next();//确保要调用 next 方法,否则钩子就不会被 resolved
 }
};

3.在C组件设置 beforeRouteLeave:代码如下:

export default {
 beforeRouteLeave(to, from, next) {
  console.log(to);
  console.log(from)
  // 设置下一个路由的 meta
  to.meta.keepAlive = false; // 让 A不缓存,即刷新
  next();//确保要调用 next 方法,否则钩子就不会被 resolved
 }
};

ok,以上代码即可满足需求3

需求4:

1.A-->B-->C-->D 从A页面依次进入BCD页面,现在我要在D页面点击返回(手机或者浏览器物理返回键)回到A页面

2.A-->E-->D 从A页面一次进入ED页面,现在我在D页面点击返回(手机或者浏览器物理返回键)回到E页面

以上的需求总结来说就是,根据不同的渠道进入D页面的时候,当点击返回的时候,进入不同的页面

1.首先我在入口main.js里面声明了一个全局变量(当然你可以按照自己的方式去声明一个变量)

global.beforeRouteName = "";

2.然后在D组件中,声明路由守卫:beforeRouteEnter,代码如下:

刚进入该组件时,便会进入beforeRouteEnter,在此先赋值:

beforeRouteEnter(to,from,next){
  global.beforeRouteName = from.name; //给全局变量赋值
  next();
 },

然后在mounted里面判断浏览器是否支持popstate

mounted(){
 //判断浏览器是否支持popstate
 if(window.history && window.history.pushState){
  history.pushState(null,null,document.URL);
  window.addEventListener('popstate',this.goBack,false);
 }
 }

其次在methods里面写goBack方法,代码如下:

goBack(){
 if(global.beforeRouteName == "C"){  //判断,当获取上个页面进来的路由是C的时候,返回到A页面
  this.$router.push({name:'A'}); 
 }else if(global.beforeRouteName == "E"){//判断,当获取上个页面进来的路由是E的时候,返回上一页
  history.go(-1);
 }else{
  this.$router.push({name:'A'}); //判断,当有其他返回值的时候,默认返回到A页面(这个随意设置,一般不会有这种情况)
 }
 }

最后一定不要忘记:在destroyed要取消监听,不然这个监听一直存在,代码如下:

destroyed(){
 window.removeEventListener('popstate',this.goBack,false);
}

到此需求4就解决了。

刚刚看了下代码,其实路由守卫做这个返回控制其实更简单。只要好好使用beforeRouteLeave这个守卫就能简单解决以上问题

补充知识:vue 使用路由守卫监听返回键,控制页面跳转

我就废话不多说了,大家还是直接看代码吧~

beforeRouteLeave(to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
  if(!this.isPublish){
   this.confirmVisible=true
   next(false)//不放行
  }else {
   next()
  }
 
 },

以上这篇vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
Vue Router中应用中间件的方法
Aug 06 #Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 #Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 #Javascript
如何利用javascript接收json信息并进行处理
Aug 06 #Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 #Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 #Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 #Javascript
You might like
星际争霸兵种名称对照表
2020/03/04 星际争霸
ThinkPHP php 框架学习笔记
2009/10/30 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python中asyncore的用法实例
2014/09/29 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
python计算两个地址之间的距离方法
2018/06/09 Python
面向对象设计的原则是什么
2013/02/13 面试题
大学毕业生工作的自我评价
2013/10/01 职场文书
门店业绩提升方案
2014/06/08 职场文书
医德医魂心得体会
2014/09/11 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
如何写辞职信
2015/05/13 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS