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 EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
Vue.js对象转换实例
Jun 07 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
Javascript变量函数浅析
2011/09/02 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
js实现随机点名功能
2020/12/23 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
Python描述器descriptor详解
2015/02/03 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python str字符串转uuid实例
2020/03/03 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
《胡杨》教学反思
2014/02/16 职场文书
法制宣传月活动方案
2014/05/11 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书