最近項目做面包屑的時候遇到一個問題就是路由變化的時候頁面視圖並沒有發生變化，后來上網查，發現是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