vue-router路由切換 元件重用挖下的坑
問題描述:vue-router導航切換 時,如果兩個路由都渲染同個元件,元件會重(chong)用,元件的生命週期鉤子不會再被呼叫,使得元件的一些資料無法根據 path的改變得到更新
****************************************************************************************************************************
翻車現場再現:
這是我的/router/index.js 的內容節選
export default new Router({ routes: [ { path: '/main', component: Main }, { path: '/get', component: Main } ] })
這是我的 Main.vue的內容節選
<p>{{$router.currentRoute.path}}</p>
以上情景很明顯 ,我是想要顯示路由跳轉前和路由跳轉後的 path值
路由從 /main 跳轉到了 /get ,理想情況是 網頁中顯示的路由從 /main 變成了 /get
但事實是網頁沒有一點變化 ,顯示的內容依然是 /main
****************************************************************************************************************************
車禍原因分析
從我的車況來看, 我的這次路由跳轉前後使用了完全相同的元件 ,通過仔細檢視vue-router文件對應位置 ,發現瞭如下關鍵內容
當使用路由引數時,例如從 /user/foo 導航到 /user/bar,原來的元件例項會被複用。因為兩個路由都渲染同個元件,比起銷燬再建立,複用則顯得更加高效。不過,這也意味著元件的生命週期鉤子不會再被呼叫。
route object 是 immutable(不可變) 的,每次成功的導航後都會產生一個新的物件。
這兩個關鍵的資訊 表明,正常元件不復用時,元件內的 route物件是最新路由 對應的, 但是元件複用時,由於元件的生命週期鉤子不會再被呼叫,元件內的route物件還是原來的,不會得到更新,所以出現了頁面的path 資訊 跳轉前後沒有變化
****************************************************************************************************************************
前往救援
原因分析清楚了,開始解決吧,還好vue-router提供瞭解決的api 如下
使用 2.2 中引入的 beforeRouteUpdate
守衛:
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
修改完後的Main.vue如下
data () {
return {
path:this.$router.currentRoute.path;
}
}
beforeRouteUpdate (to, from, next) {
path = this.$router.currentRoute.path;
}
結果救援現場再次翻車
頁面上的 path依舊沒有變化
beforeRouteUpdate (to, from, next) {
// 在當前路由改變,但是該元件被複用時呼叫
// 舉例來說,對於一個帶有動態引數的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉的時候,
// 由於會渲染同樣的 Foo 元件,因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
// 可以訪問元件例項 `this`
},
上面說的是
/foo/:id,在 /foo/1 和 /foo/2 之間跳轉的時候,
我的是 從/main 調到/get ,並不符合上面的情況,活該翻車
****************************************************************************************************************************
一次真的救援
data () {
return {
path:this.$router.currentRoute.path;
}
}
watch: {
'$route' (to, from) {
this.path = this.$router.currentRoute.path
}
}
這次真的救援成功了,頁面的 path從 /main 變成了 /get 相關推薦
vue-router路由切換 元件重用挖下的坑
問題描述:vue-router導航切換 時,如果兩個路由都渲染同個元件,元件會重(chong)用,元件的生命週期鉤子不會再被呼叫,使得元件的一些資料無法根據 path的改變得到更新 **********************************************
vue-router 路由和元件
vue-router 是 vue 中需要學習的一個重要部分, 下面我來與大家分享下自己的經驗 想了解更多元件的知識請看 以 餓了麼APP 為例 底部是我用 mint-ui 做成的公共元件, 取名為 “BottomTab” 首先我們來配置下公共元件 B
vue實現tab路由切換元件
使用vue自帶的vue-router.js路由實現分頁切換功能 實現圖片如下 下列為實現程式碼 css: *{ margin: 0; padding: 0; } #app ul{
Vue父子vue-router路由傳遞資料與父子元件傳遞資料之分析
父子路由傳遞資料 分析如下 實際上等同於父子元件之間,資料的傳遞; 父傳子 ---------> 父繫結屬性,子props接受屬性值 子傳父 ---------> 觸發自定義事件,子觸發$emit,父接收 父元件觸發子事件 ------->
vue-router 路由元件傳參
1.最簡單的用 name傳參$route.name 輸出的是當前路由 ,不過這個一般不用1.在路由檔案router/index.js裡配置name屬性。 routes: [ { path: '/', name: 'Hello',
【vue.js】藉助vue-router實現切換檢視(元件)的demo
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c
vue-router路由元資訊及keep-alive元件級快取
路由元資訊?(黑人問號臉???)是不是這麼官方的解釋很多人都會一臉懵?那麼我們說meta,是不是很多人恍然大悟,因為在專案中用到或者看到過呢? 是的,路由元資訊就是我們定義路由時配置的meta欄位;那麼這個meta的作用是什麼呢? 首先看一個場景: 通常我們在開發網站或者移動應用的時候,我
<keep-alive>控制Vue Router路由
view homepage 信息 app keepal div path router class 只給部分組件加上<keep-alive>啊,在app.vue裏這樣 <!-- 這裏是需要keepalive的 --> <keep-alive&
vue-router路由懶加載(解決vue項目首次加載慢)
.com alt 什麽 配置 過多 異常 減少 webpack bpa 懶加載:----------------------------------------------------? 也叫延遲加載,即在需要的時候進行加載,隨用隨載。 為什麽需要懶加載?
「Vue」起步 - vue-router路由與頁面間導航
port details cal 重定向 替換 特色 插件 實戰 顯式 vue-router 我們知道路由定義了一系列訪問的地址規則,路由引擎根據這些規則匹配找到對應的處理頁面,然後將請求轉發給頁進行處理。可以說所有的後端開發都是這樣做的,而前端路由是不存在"請求"一說的
Vue(十六)vue-router路由
gin package ebp () func font class 資源 red 一、 vue-router路由 1. 簡介 使用Vue.js開發SPA(Single Page Application)單頁面應用 根據不同url地址,顯示不同的內容,但顯示在同一
移動端vue項目構建(二)配置環境 vue-router路由 VUX ui框架 axios請求等等~~
公眾號 文件 ons keyword bubuko 使用方法 sass outer click 首先說一下,此項目的配置環境插件,因為是移動端所以有一部分考慮的都是移動端 : 路由 vue-router 路由 路由是vue項目中很重要的東西,構建的時候一路回車就是選好了。
vue-router路由懶加載
簡單的 href mib blog 找到 打包 首頁 OS com 懶加載:----------------------------------------------------? 也叫延遲加載,即在需要的時候進行加載,隨用隨載。 為什麽需要懶加載? 像v
Vue-router路由基礎總結(二)
發現 路由配置 script -s r12 ali 添加 實例 code 一、命名路由 有時我們通過一個名稱來標識一個路由顯得更方便一些,特別是在鏈接一個路由,或者是執行一些跳轉的時候。你可以在創建 Router 實例的時候,在 routes 配置中給某個路由設置名稱。
Vue2.0筆記——vue-router路由
Vue簡介 使用Vue.js開發SPA(Single Page Application)單頁面應用。vue-router可以通過html5的history API或者hash實現單頁應用,即不刷新跳轉,切換地址,只是頁面上的組件的切換;vue-router可以實現頁面間傳參等其他功能; 基本用法 當你要把 v
vue-router路由守衛
路由守衛及獲取cookie裡的GTICKET: ROUTER. beforeEach(( to, from, next) => { var reg = new RegExp( '(^| )
vue-router路由配置
轉自http://www.cnblogs.com/padding1015/ 兩種配置方法:在main.js中 || 在src/router資料夾下的index.js中 src/router/index.js中 1 引入 import
vue-router中關於元件複用頁面不重新整理的問題
業務描述: 當前頁面是一個帶引數的頁面,如下: 頁面下方有tab,點選其一個的跳轉路由是: 由此,發現問題,地址改變了,但是頁面資料沒有重新整理。 查閱後,此情況屬於元件複用的情況。 解決方法: 通過watch監聽路由變化: watch: { '
Vue router 路由巢狀 路由重定向 路由別名 router-link傳引數
<template> <div> 這是商品列表頁面 <router-link :to="{ name: 'title'}">標題</router-link> <router-link to="/good
vue餓了麼(一)--vue-router路由 & mock後臺資料
1.vue-router:點選導航按鈕顯示相應頁面 1.router/index.vue import Vue from 'vue' import Router from 'vue-router' import header from '@/components/header/header'