Vue Router 萬用字元路徑不好解決的問題處理

2021-10-08 03:19:16 字數 1300 閱讀 7709

在絕大多數情況下,我們都會在vue-router的路由表下面註冊乙個萬用字元路由以便所有不能識別的路由都往這個component裡面跳轉。

import vuerouter from 'vue-router';

const router = new vuerouter(

]})router.beforeeach((to,from,next) => )

以上可以滿足幾乎全部不能識別的路由跳轉需求,但是如果是帶有路由傳參並且需要將傳參傳入到萬用字元頁面去呢?而且傳參是通過params傳參的呢?這時候通用的頁面就無法滿足需求了。

舉個栗子:

和 是共享的乙個頁面,但是由於flag的不同需要進行不同的授權和不同的跳轉處理,但是這會兒我輸入aabbb,而/:flag/xxaabb又不在註冊的路由表中,通過路由守衛是無法獲取到flag引數的。

處理方案:

1、在路由表中維護兩個萬用字元路由

}]2、在路由守衛中做如下判斷

if (to.matched.length === 0) /g, '/');//過濾掉路由中所有多個//的情況,其中反斜槓會被瀏覽器直接轉成/,'../../../'類似的也會被轉

let subpath = pathname.substring(pathname.indexof("/") + 1);

let subpathflag = subpath.substring(0, subpath.indexof("/"));

let path = `$page-404`;//帶有傳參的404頁面

if (flagkeys.includes(subpathflag)) `;

} else /page-404`;//不帶傳參的404頁面

}} else if (to.name == 'page-404' || to.name == 'page-404-flag') else

有了以上的配置和過濾就可以獲取到不是正確路由表中的路由中的params傳參了,並且可以通過404中轉頁面做不同跳轉邏輯。

路徑萬用字元

乙個模組 action物件 使用乙個action配置 例如 使用者模組分為 使用者登入 使用者註冊 使用者資訊修改,那麼我們不可能每乙個都去配置乙個action,後續不太好維護,量也比較多,其實都是乙個action類只是不同方法而已 我們可以在action配置中使用 表示,它是表示路徑的萬用字元,使...

struts 路徑萬用字元使用

關鍵字 struts 路徑萬用字元使用 一 struts2萬用字元的使用 pages jsp jsp jsp c0101001 execute c0101002 execute c0101003 execute c0101004 execute c0101005 execute 說明 路徑 test...

vue router切換,元件不銷毀

需求 後台管理系統,切換選單時需要一部分頁面重新整理,一部分不重新整理 其實就是元件銷毀問題 首先,我們需要在router view標籤外再包上一層標籤keep alive route.meta.keepalive router view keep alive route.meta.keepaliv...