【vue】解決路由切換，頁面不更新的實用方法
汪小穆 2018-09-22 17:27:09 31639 收藏 34
展開前言：vue-router的切換不同於傳統的頁面的切換。路由之間的切換，其實就是元件之間的切換，不是真正的頁面切換。這也會導致乙個問題，就是引用相同元件的時候，會導致該元件無法更新，也就是我們口中的頁面無法更新的問題了。
nick
mike
//路由配置檔案**
import vue from 'vue'
import router from 'vue-router'
import page1 from '@/page/page1'
vue.use(router)
export default new router(,
],mode:'history'
})名字:
在路由中進行切換結果
這時候會發現input標籤的value值並沒有隨著路由的改變而改變。並沒有更新
二、解決方案①
給增加乙個不同:key值，這樣vue就會識別這是不同的了。
nick
mike
在路由中進行切換結果
這時候路由就會更新了。不過這也就意味著需要把每個都繫結乙個key值。如果我從page1跳到page2不同元件的話，我其實是不用擔心元件更新問題的。
三、解決方案②
給增加乙個不同v-if值，來先摧毀，然後再重新建立起到重新整理頁面的效果。
nick
mike
①因為router-link元件有取消點選事件，這裡的.native就是為了觸發元件原生標籤中的事件。
②this.$nexttick(()=>{}) 的用法是等this.routeralive = false; 觸發後再執行 this.routeralive = true; 從而起到摧毀再建立的效果。
四、解決方案②的延伸，在路由內部觸發路由的重新整理。
方案①，方案②都是通過路由的外部來更新路由的，那如果想從路由內部來更新路由呢？
nick
mike
名字:跳轉到nick,不重新整理路由
跳轉到nick,並重新整理路由
跳轉到本身,不重新整理路由
重新整理本身
①、當我們點選"跳轉到nick,不重新整理路由" 時，會發現input的value值並沒有改變。
②、當我們點選"跳轉到nick,並重新整理路由" 時，這時候input的value值就已經改變了。
③、當我們在input中輸入隨便輸入些數值，然後點選"跳轉到本身，不重新整理路由"，會發現input裡面的內容沒有重新整理。
④、點選重新整理本身就能觸發重新整理路由了，是不是很實用。
vue router切換，元件不銷毀
需求 後台管理系統，切換選單時需要一部分頁面重新整理，一部分不重新整理 其實就是元件銷毀問題 首先，我們需要在router view標籤外再包上一層標籤keep alive route.meta.keepalive router view keep alive route.meta.keepaliv...
按鈕切換元件
本 只是供自己學習使用，如有錯誤，希望批評指出！布局分布 div id offno input type checkbox id fd class fd label for fd class toggle span class toggle header span label div 樣式 body...
vue之Tab切換元件
如下 示例 如下 示例 頭部切換 tab tilte v for item,index in tablist key index click toggletab index li ul 內容元件 11201939.html 如下 示例 頭部切換 for item,index in tablable ...