Vue中解决路由切换,页面不更新的实用方法
前言:vue-router的切换不同于传统的页面的切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了。
一、问题呈现
在路由中进行切换结果
这时候会发现input标签的value值并没有随着路由的改变而改变。并没有更新
二、解决方案①
给<router-view :key="key"></router-view>增加一个不同:key值,这样vue就会识别这是不同的<router-view>了。
在路由中进行切换结果
这时候路由就会更新了。不过这也就意味着需要把每个<router-view>都绑定一个key值。如果我从page1跳到page2不同组件的话,我其实是不用担心组件更新问题的。
三、解决方案②
给<router-view v-if="routerAlive"></router-view>增加一个不同v-if值,来先摧毁<router-link>,然后再重新创建<router-link>起到刷新页面的效果。
①因为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>
①、当我们点击"跳转到nick,不刷新路由" 时,会发现input的value值并没有改变。
②、当我们点击"跳转到nick,并刷新路由" 时,这时候input的value值就已经改变了。
③、当我们在input中输入随便输入些数值,然后点击"跳转到本身,不刷新路由",会发现input里面的内容没有刷新。
④、点击刷新本身就能触发刷新路由了,是不是很实用。
Vue中解决路由切换,页面不更新的实用方法的更多相关文章
- 8种Vue中数据更新了但页面没有更新的情况
目录 1.Vue 无法检测实例被创建时不存在于 data 中的 属性 2. Vue 无法检测'对象属性'的添加或移除 3.Vue 不能检测利用数组索引直接修改一个数组项 4.Vue 不能监测直接修改数 ...
- 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法
1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...
- vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...
- vue中的路由的跳转的参数
vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...
- Vue中断axios请求-切换页面+重复请求
切换页面时中断 一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能, ...
- vue中的一些用法,持续更新中......
1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...
- 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
随机推荐
- How Does Caching Work in AFNetworking? : AFImageCache & NSUrlCache Explained
http://blog.originate.com/blog/2014/02/20/afimagecache-vs-nsurlcache/
- python之 yield --- “协程”
在编程中我们经常会用到列表,以前使用列表时需要声明和初始化,在数据量比较大的时候也需要把列表完整生产出来,例如要存放1000给数据,需要准备长度1000的列表,这样计算机就需要准备内存放置这个列表,在 ...
- java中数组的数组问题
int[] arr = new int[10]; int[] arr2 = arr; arr[1] = 10; arr2[1] = 20; System.out.println(arr[1]); 上面 ...
- windows_vs编译过程
visual studio 2010 编译程序时,首先是cpp经过预处理,处理掉#define,#include等等.#include部分,将头文件部分替换到cpp中.之后进行优化过程,到.s.之后进 ...
- Thinkphp5 自定义分页样式显示页码和数量
Thinkphp5 自带的分页比较简单,本文通过修改Bootstrap类自定义显示分页的页码和数量 一.修改完成后如下图显示 二.修改Bootstrap代码: 1.为了不改动Bootstrap.php ...
- Nginx和Apache 转发网络问题
Linux 环境下,Apache 正常安装,httpd.conf也已正常配置,经测试80端口也已开通,但在外网测试时仍然是提示503错误.经过查资料和分析怀疑是SELinux的原因,于是查看果然是: ...
- dos2unix 将DOS格式转换成NUIX格式
1.命令功能 dos2unix将windows文件格式转换成unix文件格式. 2.语法格式 dos2unix file 3.使用范例 [root@localhost ~]# dos2unix wi ...
- MacOS Mojave 安装sshpass
使用sshpass的场景 安装sshpass及各种常见小问题处理 测试 安全提示 使用sshpass的场景 在MacOS下使用ansible命令(inventory文件中使用了密码验证的方式)或者使用 ...
- Java验证码程序
1.设计思想利用random的随机生成数字,利用for循环控制随机数字的个数来控制验证码的输出.利用JFrame实现布局的管理,对登录框内容的位置进行管理. 2.流程图 3.源代码 denglu类 i ...
- Python---进阶---文件操作---搜索文件和保存搜索结果
### 编写一个程序,用户输入文件名以及开始搜索的路径,搜索该文件是否存在,如果遇到文件夹,则进入该文件夹继续搜索 - input 去接受用户输入的文件名和开始搜索的路径 - os.path.isdi ...