VueRouter 元件復用

2022-07-20 11:12:12 字數 1769 閱讀 6031

在使用路由引數時,比如從`/our/xsan`跳轉到`/our/foo`,原來的元件例項會被復用。因為這兩個路由都是渲染的同乙個元件,比起銷毀再重建,復用則顯得更加高效。不過,這也就意味著元件的生命週期鉤子函式將不會被再次呼叫。

1、監聽`this.route`屬性。通過判斷`to`和`from`來獲取更新的資料。

watch:

}

2、使用導航守衛的`beforerouteupdate`方法,也可以獲取`to`和`from`,但是這個函式需要呼叫`next()`,否則頁面不會更新。

beforerouteupdate: function

(to, from, next)

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

script

src=""

>

script

>

<

script

src=""

>

script

>

<

title

>vuerouter-元件復用

title

>

head

>

<

body

>

<

div

id>

<

ul>

<

li>

<

router-link

to="/"

>首頁

router-link

>

li>

<

li>

<

router-link

to="/our/xsan"

>我們

router-link

>

li>

<

li>

<

router-link

to="/our/xsan3333"

>我們2

router-link

>

li>

ul>

<

router-view

>

router-view

>

div>

<

script

>

varindex

=vue.extend()

varour

=vue.extend(,

//watch://}

beforerouteupdate:

function

(to, from, next)

})let router

=new

vuerouter(,,]

})newvue()

script

>

body

>

html

>

vue router 元件例項被復用問題

最近在開發過程中遇到如下問題 當前路由是這樣的 只改變keywords的值,路由不跳轉 造成這樣的原因如下圖所示 參考文件 這種情況網上的解決方式 這是通過文章id載入對應文章頁面的路由,第一次訪問時,post.vue這個元件會被渲染到元件樹中,mounted安裝元件時通過文章id獲取文章內容展示到...

vue router 路由和元件

vue router 是 vue 中需要學習的乙個重要部分,下面我來與大家分享下自己的經驗 v model currentid fixed id home slot icon src currentid home 首頁mt tab item id discover slot icon src cur...

專案復用元件

下拉框選擇器 收款銀行 queryinfo.companyaccount clearable for item in banklist key item.id label item.opttext value item.optvalue el option el select el form ite...