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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 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
删除无限级目录与文件代码共享
2006/07/12 PHP
图书管理程序(三)
2006/10/09 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
python如何生成各种随机分布图
2018/08/27 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
写给女朋友的道歉信
2014/01/12 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
三方合作意向书范本
2015/05/09 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
教师继续教育反思周记
2015/06/25 职场文书
安全教育主题班会总结
2015/08/14 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis