最近开发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 路由缓存 路由嵌套 路由守卫 监听物理返回的更多相关文章

  1. cordova app 监听物理返回键

    物理返回键指的是手机系统自带的返回按钮,通过cordova监听返回按钮操作,可以禁止某些页面的返回操作,以及实现点击两次返回按钮退出应用. var pageUrl = window.location. ...

  2. JS使用 popstate 事件监听物理返回键

    pushHistory();        window.addEventListener("popstate", function (e) {            if (or ...

  3. Vue(基础六)_嵌套路由(续)

    一.前言                  1.路由嵌套里面的公共路由                  2.keep-alive路由缓存                  3.导航守卫 二.主要内容 ...

  4. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  5. vue+hbuilder监听安卓返回键问题

    1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...

  6. 使用ionic开发时用遇到监听手机返回按钮的问题~

    当时用的是ionic开发一个app,需求是,当按下手机的返回按钮,在指定的页面双击退出,而在其他页面点击一次返回到上个页面: 其实用ionic自带的服务就可以解决:  //双击退出   $ionicP ...

  7. javascript监听手机返回键

    javascript监听手机返回键 <pre> if (window.history && window.history.pushState) { $(window).on ...

  8. vue(19)嵌套路由

    嵌套路由 有时候在路由中,主要的部分是相同的,但是下面可能是不同的.比如访问首页,里面有新闻类的/home/news,还有信息类的/home/message.这时候就需要使用到嵌套路由.项目结构如下: ...

  9. vue学习-day05 -- 案例:名字合并(监听data数据的改变)

    1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...

随机推荐

  1. 【数据库】java链接jdbc 释放资源

    /* *   编写快速 入门的jdbc 程序 : *    *    1. 先导入 具体的驱动jar包 *    2. 编写一个类 , 写jdbc 的程序 *  *  具体的编写 java类的 代码的 ...

  2. dukuwiki简单教程

    =====请先阅读下面的说明,有助于你快速入门===== * DokuWiki(也就是我们通常称谓的wiki) 支持一些简单的标记语言, 以尽最大可能使文档看上去更友好. * 你可以把它理解为一种和c ...

  3. js中的正则表达式的运用

    正则表达式是一个拆分字符串并查询相关信息的过程:是现代开发中很重要的一环.作为一个web开发人员必须牢牢掌握这项技能,才能尽情得在js中驰骋. 1.创建正则表达式: 正则表达式(regular exp ...

  4. Java设计模式—组合模式

    组合模式是一种常见的设计模式(但我感觉有点复杂)也叫合成模式,有时又叫做部分-整体模式,主要是用来描述部分与整体的关系. 个人理解:组合模式就是将部分组装成整体. 定义如下: 将对象组合成树形结构以表 ...

  5. How to save rules of the iptables?

    The easy way is to use iptables-persistent. Install iptables-persistent: sudo apt-get install iptabl ...

  6. eclipse 断点调试快捷键

    (1)Ctrl+M --切换窗口的大小(2)Ctrl+Q --跳到最后一次的编辑处(3)F2 --当鼠标放在一个标记处出现Tooltip时候按F2则把鼠标移开时Tooltip还会显示即Show Too ...

  7. QTreeView/QTableView中利用QStandardItem实现复选框三种形态变化

    https://www.techieliang.com/2017/12/729/ 原文地址 using_checkbox_item.h /** * @file using_checkbox_item. ...

  8. 安卓性能优化之清除Handler的Message和Runnable

    安卓性能优化之清除Handler的Message和Runnable Handler是由系统所提供的一种异步消息处理的常用方式,一般情况下不会发生内存泄露. 但既然是调优,当在A_Activity中使用 ...

  9. 远程桌面到 Ubuntu 虚拟机

    安装 Ubuntu 虚拟机,创建端口号为 3389 的 Endpoint. 安装 Gnome 桌面 复制 sudo apt-get update sudo apt-get install ubuntu ...

  10. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...