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温习篇 强大的JQuery选择器
Apr 24 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
JS重要知识点小结
Nov 06 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
简单了解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中利用XML技术构造远程服务(上)
2006/10/09 PHP
php学习之流程控制实现代码
2011/06/09 PHP
php去除HTML标签实例
2013/11/06 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
一分钟理解js闭包
2016/05/04 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
彻底理解Python list切片原理
2017/10/27 Python
Python错误处理操作示例
2018/07/18 Python
Selenium定位元素操作示例
2018/08/10 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
Python列表操作方法详解
2020/02/09 Python
Django配置跨域并开发测试接口
2020/11/04 Python
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
大学生标准自荐书
2014/06/15 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
中学生自我评价2015
2015/03/03 职场文书
运动会宣传稿50字
2015/07/23 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL