前言：vue-router的切換不同於傳統的頁面的切換。路由之間的切換，其實就是元件之間的切換，不是真正的頁面切換。這也會導致一個問題，就是引用相同元件的時候，會導致該元件無法更新，也就是我們口中的頁面無法更新的問題了。

一、問題呈現

<!-- 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></router-view>
      </div>
  </div>
</template>
 

//路由配置檔案程式碼
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/page/Page1'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/page1', component: Page1 },
    {path: '/page1/:name', component: Page1 }
  ],
  mode:'history'
})

<!-- Page1元件程式碼 -->
<template>
    <div class="page-1">
	名字:<input type="text" v-model="value">
    </div>
</template>
<script type="text/javascript">
    export default {
	name:'page1',
	mounted(){
	    this.value = this.$route.params.name;
	},
	data(){
	    return {
		value:''
	    }
	}
    }
</script>
 

在路由中進行切換結果

這時候會發現input標籤的value值並沒有隨著路由的改變而改變。並沒有更新

二、解決方案①

給<router-view :key="key"></router-view>增加一個不同:key值，這樣vue就會識別這是不同的<router-view>了。

<!-- 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 :key="key"></router-view>
      </div>
  </div>
</template>

<script>
    export default{
	data(){
	    return {

		}
	},
	computed:{
	    key(){
	        return this.$route.path + Math.random();
	    }
	}
    }
</script>
 

在路由中進行切換結果

 這時候路由就會更新了。不過這也就意味著需要把每個<router-view>都繫結一個key值。如果我從page1跳到page2不同元件的話，我其實是不用擔心元件更新問題的。

三、解決方案②

給<router-view v-if="routerAlive"></router-view>增加一個不同v-if值，來先摧毀<router-link>，然後再重新建立<router-link>起到重新整理頁面的效果。

<!-- 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裡面的內容沒有重新整理。

④、點選重新整理本身就能觸發重新整理路由了，是不是很實用。