vue 路由更新页面视图未更新问题
最近项目做面包屑的时候遇到一个问题就是路由变化的时候页面视图并没有发生变化,后来上网查,发现是vue-router的特性导致的。
vue-router的切换不同于传统的页面的切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了。
而我正是因为引用了相同的组件,才会发生这样的问题,根据网上的解决办法也解决了问题,现在将方法记录下。
方法一:
给<router-view :key="key"></router-view>增加一个不同:key值,这样vue就会识别这是不同的<router-view>了。
这时候路由就会更新了。不过这也就意味着需要把每个<router-view>都绑定一个key值。如果我从page1跳到page2不同组件的话,我其实是不用担心组件更新问题的。
我虽然用方法一解决了问题,但上述问题确实存在,如果我跳不同的组件的话,确实不需要担心组件更新问题。
方法二:
给<router-view v-if="。。。"></router-view>增加一个不同v-if值,来先摧毁<router-link>,然后再重新创建<router-link>起到刷新页面的效果。
eg:
<!-- App.vue根组件代码 -->
<template>
<div class="app">
<div class="slide">
<ul>
<li><router-link to="/page1/freddy" @click.native="routerRefresh">freddy</router-link></li>
<li><router-link to="/page1/nick" @click.native="routerRefresh">nick</router-link></li>
<li><router-link to="/page1/mike" @click.native="routerRefresh">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
}
},
methods:{
routerRefresh(){
this.routerAlive = false;
this.$nextTick(()=>{
this.routerAlive = true;
});
}
}
}
</script>
①因为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里面的内容没有刷新。
④、点击刷新本身就能触发刷新路由了。
上述方法利用 provide/inject 很好的从路由内部更新路由。也让我初步了解了provide/inject这一对的作用。这里记之,并附上原作链接。
---------------------
来源:CSDN
原文:https://blog.csdn.net/w390058785/article/details/82813032
vue 路由更新页面视图未更新问题的更多相关文章
- sublime text3 - vue修改data,视图无更新
ubuntu系统使用sublime text3做vue开发的时候遇到了一个问题,就是修改vue文件并保存后视图页面并不会随之修改,只有重新run dev时修改才会生效,原因没找到 猜想应该是subli ...
- vue 数据改变但是视图没更新
在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set 如果是对象类型: this.$set(this.userInfo, 'name', 'gionlee ...
- vue---数据更新,视图不更新问题
写点赞功能时,点赞后已经追加到对象里了,但是视图没有更新. 查找了些资料: 数据已经更新了但是视图不更新的问题,有几个原因: 1.根属性不存在,而想要直接给根属性赋值导致的视图不更新.此时初始化属性的 ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue 数组push元素 视图没更新
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...
- avalon数据已更新,视图未更新的bug修复
$computed: { pinlei() { var key = this.currentProduct.key || 'youpin'; console.log(key, "我是key& ...
- vue2数组更新视图未更新的情况
以选中列表为例 <p @click="selectGoods(item, index)" :class="{'selected': item.isActive}&q ...
- 前端 | Vue 路由返回恢复页面状态
需求场景:首页搜索内容,点击跳转至详情页,页面后退返回主页,保留搜索结果. 方案:路由参数:路由守卫 需求描述 在使用 Vue 开发前端的时候遇到一个场景:在首页进行一些数据搜索,点击搜索结果进入详情 ...
- vue路由实现多视图的单页应用
多视图的单页应用:在一个页面中实现多个页面不同切换,url也发生相应变化. router-view结合this.$router.push("/pickUp")实现,效果如下: 当点 ...
随机推荐
- StackExchange.Redis实现Redis发布订阅
由于ServiceStack.Redis最新版已经收费,所以现在大家陆陆续续都换到StackExchange.Redis上了,关于StackExchange.Redis详细可以参看Github htt ...
- gogland golang 颜色&字体 colors&font 配置文件
<scheme name="Ya" version="142" parent_scheme="Darcula"> <opt ...
- python 函数星号参数说明
转自: python 函数参数的传递(参数带星号的说明) python中函数参数的传递是通过赋值来传递的.函数参数的使用又有俩个方面值得注意:1.函数参数是如何定义的 2.在调用函数的过程中参数是如何 ...
- 常见的MIME
"css": "text/css", "gif": "image/gif", "html": &qu ...
- 我的Linux主机操作记录续
6.安装部署node.js环境 (1)node.js的使用的项目构建工具GYP(Generate Your Project)是基于Python2.7的,所以需要安装Python2.7环境 一般自带有此 ...
- 彻底的卸载SQL Server2005
昨天不小心把SQL Server 2005弄坏了.所以,对彻底卸载他进行了研究.在这里记录一下,嘿嘿~ 1.首先在控制面板中卸载所有与SQL Server 2005相关的程序,要记得最后一个卸载Mic ...
- [Postgres]合并多行到一列(转)
转自http://csk83.sinaapp.com/?p=104 在实际应用中常常遇见这样的情况,见下表,我们现在需要统计出来每年每个人的工资总和以及发放月份. user_name year mon ...
- sublime 插件安装之sublime highlight 如何优雅拷贝代码到word
首先:打开preference => Package Control,输入 Add Repository ,用它来为Sublime 添加插件安装源, https://github.com/n ...
- Winfrom 桌面弹窗拦截 关闭进程简易程序 源代码下载
***********************2019 2.7更新 v 2.0*************************************************** 程序 源代码 交互 ...
- Echart自定义y轴刻度信息2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...