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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
简单了解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
php 删除数组元素
2009/01/16 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
理解python多线程(python多线程简明教程)
2014/06/09 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python程序变成软件的实操方法
2019/06/24 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
大学生村官典型材料
2014/01/12 职场文书
继承权公证书
2014/04/09 职场文书
服务承诺书怎么写
2014/05/24 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
宾馆安全管理制度
2015/08/06 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle