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限制复选框checkbox可选中个数的方法
Apr 20 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
javascript回调函数详解
2018/02/06 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
python实现文本文件合并
2015/12/29 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
幼儿园中秋节活动反思
2014/02/16 职场文书
担保书怎么写
2014/04/01 职场文书
表彰大会策划方案
2014/05/13 职场文书
优秀语文教师事迹
2014/05/18 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
python not运算符的实例用法
2021/06/30 Python
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS