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 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
DOM精简教程
2006/10/03 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
利用vue.js插入dom节点的方法
2017/03/15 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python生成随机MAC地址
2015/03/10 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
毕业自我评价范文
2013/11/17 职场文书
会计专业自荐信
2013/12/02 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS