久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

02
2023/06

Vue路由匹配參數(shù)

發(fā)布時間:2023-06-02 18:39:55
發(fā)布者:MaiMai
瀏覽量:
0

Vue Router 提供了強(qiáng)大的參數(shù)匹配能力。要匹配任何內(nèi)容,可以使用自定義參數(shù)正則表達(dá)式,方法是在參數(shù)后面的圓括號中使用正則表達(dá)式。

舉個例子,我們在components文件夾下新建兩個文件,分別為用戶中心何用戶設(shè)置頁面,在其中編寫代碼如下:

image.png

image.png

這兩個頁面所需參數(shù)不同。接著在main.js中定義路由:

Const routes = [

{path:/user/:username,component:User},

{path:/user/:id,component:UserSetting}

]

可以發(fā)現(xiàn),這兩個路由除了參數(shù)名不同外,其余都相同,這種情況下,我們無法訪問用戶設(shè)置界面,所有符合UserSetting組件的路由規(guī)則同時也符合User組件。這時便可以通過正則表達(dá)式來實(shí)現(xiàn)不同類型參數(shù)匹配到不同組件。

在進(jìn)行路由參數(shù)匹配時,Vue Router允許參數(shù)內(nèi)部使用正則表達(dá)式來進(jìn)行匹配,如下。

Const routes = [

{path:/user/:username,component:User},

{path:/user/:id(\\d+),component:UserSetting}

]

這樣,對于數(shù)字類型的參數(shù)便可匹配到UserSetting組件,其他類型參數(shù)則自動匹配到User組件下。

關(guān)鍵詞:
返回列表