Vue路由切换页面不更新问题解决方案


Posted in Javascript onJuly 10, 2020

前言:vue-router的切换不同于传统的页面的切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了。

一、问题呈现

Vue路由切换页面不更新问题解决方案

Vue路由切换页面不更新问题解决方案

Vue路由切换页面不更新问题解决方案

在路由中进行切换结果

Vue路由切换页面不更新问题解决方案

Vue路由切换页面不更新问题解决方案

这时候会发现input标签的value值并没有随着路由的改变而改变。并没有更新

二、解决方案①

给<router-view :key="key"></router-view>增加一个不同:key值,这样vue就会识别这是不同的<router-view>了。

Vue路由切换页面不更新问题解决方案

在路由中进行切换结果

Vue路由切换页面不更新问题解决方案

Vue路由切换页面不更新问题解决方案

这时候路由就会更新了。不过这也就意味着需要把每个<router-view>都绑定一个key值。如果我从page1跳到page2不同组件的话,我其实是不用担心组件更新问题的。

三、解决方案②

给<router-view v-if="routerAlive"></router-view>增加一个不同v-if值,来先摧毁<router-link>,然后再重新创建<router-link>起到刷新页面的效果。

Vue路由切换页面不更新问题解决方案

①因为router-link组件有取消点击事件,这里的.native就是为了触发组件原生标签中的事件。

②this.$nextTick(()=>{}) 的用法是等this.routerAlive = false; 触发后再执行 this.routerAlive = true; 从而起到摧毁再创建的效果。

四、解决方案②的延伸,在路由内部触发路由的刷新。

方案①,方案②都是通过路由的外部来更新路由的,那如果想从路由内部来更新路由呢?

<!-- App.vue根组件代码 -->
<template>
 <div class="app">
   <div class="slide">
     <ul>
       <li><router-link to="/page1/freddy" >freddy</router-link></li>
       <li><router-link to="/page1/nick" >nick</router-link></li>
       <li><router-link to="/page1/mike" >mike</router-link></li>
     </ul>
   </div>
   <div class="content">
       <router-view v-if="routerAlive"></router-view>
   </div>
 </div>
</template>

<script>
  export default{
  data(){
    return {
    routerAlive:true
    }
  },
  provide(){  //在父组件中创建属性
      return {
        routerRefresh: this.routerRefresh
      }
    },
  methods:{
    routerRefresh(){
      this.routerAlive = false;
    this.$nextTick(()=>{
      this.routerAlive = true;
    });
    }
  }
  }
</script>
<!-- 组件Page1代码 -->
<template>
  <div class="page-1">
    名字:<input type="text" v-model="value"><br/>
    <button @click="linkToNick1">跳转到nick,不刷新路由</button>
    <button @click="linkToNick2">跳转到nick,并刷新路由</button>
    <br/>
    <button @click="linkToSelf1">跳转到本身,不刷新路由</button>
    <button @click="linkToSelf2">刷新本身</button>
  </div>
</template>
<script type="text/javascript">
  export default {
  name:'page1',
  inject:['routerRefresh'],  //在子组件中注入在父组件中出创建的属性
  mounted(){
    this.value = this.$route.params.name;
  },
  data(){
    return {
      value:''
    }
  },
  methods:{
    linkToNick1(){
    this.$router.push('/page1/nick');
    },
    linkToSelf1(){
    this.$router.push('/page1/freddy');
    },
    linkToNick2(){
    this.$router.push('/page1/nick');
    this.routerRefresh();
    },
    linkToSelf2(){
    this.routerRefresh();
    }
  }
  }
</script>

<style type="text/css">
  button { margin-top:10px;}
    button:hover { background:#ff9500; }
</style>

Vue路由切换页面不更新问题解决方案

①、当我们点击"跳转到nick,不刷新路由" 时,会发现input的value值并没有改变。

Vue路由切换页面不更新问题解决方案

②、当我们点击"跳转到nick,并刷新路由" 时,这时候input的value值就已经改变了。

Vue路由切换页面不更新问题解决方案

③、当我们在input中输入随便输入些数值,然后点击"跳转到本身,不刷新路由",会发现input里面的内容没有刷新。

Vue路由切换页面不更新问题解决方案

④、点击刷新本身就能触发刷新路由了,是不是很实用。

Vue路由切换页面不更新问题解决方案

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
简单了解Vue computed属性及watch区别
Jul 10 #Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 #Javascript
基于vue+element实现全局loading过程详解
Jul 10 #Javascript
JS sort方法基于数组对象属性值排序
Jul 10 #Javascript
JavaScript this指向相关原理及实例解析
Jul 10 #Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 #Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 #Javascript
You might like
Smarty安装配置方法
2008/04/10 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
Python创建系统目录的方法
2015/03/11 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python实现八大排序算法(1)
2017/09/14 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
初级Java程序员面试题
2016/03/03 面试题
机械专业求职信范文
2014/07/15 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
指导教师推荐意见
2015/06/05 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
Java后台生成图片的完整步骤
2021/08/04 Java/Android