色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue-router redirect

錢艷冰1年前7瀏覽0評論

vue-router是Vue.js官方的路由管理插件,用于管理應用的url路徑以及對應的組件視圖。redirect是vue-router提供的一種重定向功能,可以方便地將頁面重定向到另一個路徑。

重定向是指將用戶請求的url路徑重定向到另一個url路徑,相當于用戶請求了A頁面,但是服務器卻返回了B頁面的內容。

在vue-router中,可以使用redirect來實現重定向。redirect可以是一個字符串或者是一個函數,用于定義將請求重定向到哪個路徑。

//將/user/123重定向到/profile/123
{ path: '/user/:id', redirect: '/profile/:id' }
//將/user/123重定向到/profile/123,并保留查詢參數
{ path: '/user/:id', redirect: to =>{
const { id } = to.params
return `/profile/${id}?redirected=true`
}}

如上代碼所示,redirect可以直接將路徑字符串傳遞過去,也可以是一個函數,在函數中可以將動態路徑參數進行處理。

需要注意的是,重定向是在組件解析之前進行的。也就是說,如果redirect重定向到的是一個需要保護的頁面,那么用戶依然能直接訪問被重定向到的頁面。因此,需要在路由解析守衛中進行重定向驗證。

router.beforeEach((to, from, next) =>{
if (to.matched.some(record =>record.meta.requireAuth)) {
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})

如上代碼所示,使用路由解析守衛beforeEach來判斷用戶是否已登錄,如果未登錄則重定向到登錄頁面,并且在query參數中記錄當前頁面,以便登錄后自動跳轉回該頁面。

總之,vue-router提供了非常方便的頁面重定向功能,使用起來也非常簡單。需要注意的是,重定向是在組件解析之前進行的,因此需要在路由解析守衛中進行重定向驗證。