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 UI的拖拽功能实现方法小结
Mar 14 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 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
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
JSONP 跨域共享信息
2012/08/16 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
React中的render何时执行过程
2018/04/13 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python读写文件方法总结
2015/06/09 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Python3 max()函数基础用法
2019/02/19 Python
Python使用python-docx读写word文档
2019/08/26 Python
什么是Python变量作用域
2020/06/03 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
老师推荐信
2013/10/28 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
婚宴领导致辞
2015/07/28 职场文书
毕业班工作总结
2015/08/10 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js