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里面的內容沒有刷新。

④、點擊刷新本身就能觸發刷新路由了，是不是很實用。