您好,登錄后才能下訂單哦!
根據(jù)vue官方文檔,對于重定向有詳細的示例,但是關于使用方法動態(tài)重定向的描述卻不多,重定向部分的描述如下:
重定向
重定向也是通過 routes 配置來完成,下面例子是從 /a 重定向到 /b:
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })
重定向的目標也可以是一個命名的路由:
const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })
甚至是一個方法,動態(tài)返回重定向目標:
const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // 方法接收 目標路由 作為參數(shù) // return 重定向的 字符串路徑/路徑對象 }} ] })`這里寫代碼片`
關于動態(tài)重定向的示例如下:
{ path: '/dynamic-redirect/:id?', redirect: to => { const { hash, params, query } = to if (query.to === 'foo') { return { path: '/foo', query: null } } if (hash === '#baz') { return { name: 'baz', hash: '' } } if (params.id) { return '/with-params/:id' } else { return '/bar' } } }
首先參數(shù)解構,獲取hash、params、query,然后根據(jù)獲取值進行邏輯判斷之后動態(tài)路由重定向。這里的return值是path值,而不是params值,必須是一個已經(jīng)存在的path才能進行路由重定向。而且這個path不能使自身,因為作為一個重定向路由跳轉(zhuǎn)到自身還要繼續(xù)重定向,就會進行一個死循環(huán)。
現(xiàn)在需求如下:
為了防止用戶隨便改變路由參數(shù)而導致頁面崩潰,需要進行路由重定向,將不符合要求的參數(shù)進行重定向到一個規(guī)范頁面。比如用戶點擊按鈕跳轉(zhuǎn)/list/1但是用戶自己將1進行改變傳遞不符合規(guī)范的參數(shù)給頁面,希望能夠在用戶改變參數(shù)值后跳轉(zhuǎn)到默認的規(guī)范頁面
以上代碼實現(xiàn)的效果是拿到路由參數(shù),如果用戶將頁面參數(shù)改的不符合規(guī)范就進行路由重定向。使得頁面可以獲取正確參數(shù)值?,F(xiàn)在的效果是如果用戶輸入/1則進入正常頁面/list/1,輸入/xsajsxoal、/5、/-5 等不符合規(guī)范的參數(shù)就會跳轉(zhuǎn)進入/list/0。
雖然重定向的邏輯是沒有問題的但問題依舊存在。那用戶繼續(xù)將/list/1改成/list/xsjknxkja怎么辦呢?
可見重定向是不適合解決這個問題的。這時就用到了vue路由的導航守衛(wèi)。導航守衛(wèi)的實現(xiàn)方式如下:
{ path: '/:type', name: 'normal', component: index, beforeEnter (to, from, next) { if (/^[0-3]$/.test(to.params.type)) { next() } else { next('/0') } } }
關于導航守衛(wèi)官方文檔描述如下:
正如其名,vue-router 提供的導航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導航。有多種機會植入路由導航過程中:全局的, 單個路由獨享的, 或者組件級的。
記住參數(shù)或查詢的改變并不會觸發(fā)進入/離開的導航守衛(wèi)。你可以通過觀察 $route 對象來應對這些變化,或使用 beforeRouteUpdate 的組件內(nèi)守衛(wèi)。
你可以使用 router.beforeEach 注冊一個全局前置守衛(wèi):
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
當一個導航觸發(fā)時,全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行,此時導航在所有守衛(wèi) resolve 完之前一直處于 等待中。
每個守衛(wèi)方法接收三個參數(shù):
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了,則導航的狀態(tài)就是 confirmed (確認的)。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了(可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到 from 路由對應的地址。
next(‘/') 或者 next({ path: ‘/' }): 跳轉(zhuǎn)到一個不同的地址。當前的導航被中斷,然后進行一個新的導航。
next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例,則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)。
確保要調(diào)用 next 方法,否則鉤子就不會被 resolved。
根據(jù)需求并不需要使用到全局守衛(wèi),只需要使用到路由獨享守衛(wèi),因此只需要在路由內(nèi)添加beforeEnter然后判斷是否符合參數(shù)規(guī)范,是的話用next() 進入下一個鉤子,否則用next(‘/')跳轉(zhuǎn)到目標地址。
以上這篇Vue的路由動態(tài)重定向和導航守衛(wèi)實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。