重定向

重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

const router = new VueRouter({ routes: [ { path: ’/a’, redirect: ’/b’ } ]})

重定向的目標也可以是一個命名的路由：

const router = new VueRouter({ routes: [ { path: ’/a’, redirect: ’/b’ } ]})

甚至是一個方法，動態(tài)返回重定向目標：

const router = new VueRouter({ routes: [ { path: ’/a’, redirect: to => { // 方法接收 目標路由 作為參數(shù) // return 重定向的 字符串路徑/路徑對象 }} ]})

注意導(dǎo)航守衛(wèi)并沒有應(yīng)用在跳轉(zhuǎn)路由上，而僅僅應(yīng)用在其目標上。在下面這個例子中，為 /a 路由添加一個 beforeEach 或 beforeLeave 守衛(wèi)并不會有任何效果。

其它高級用法，請參考例子。

別名

『重定向』的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，然后匹配路由為 /b，那么『別名』又是什么呢？

/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。

上面對應(yīng)的路由配置為：

const router = new VueRouter({ routes: [ { path: ’/a’, component: A, alias: ’/b’ } ]})

『別名』的功能讓你可以自由地將 UI 結(jié)構(gòu)映射到任意的 URL，而不是受限于配置的嵌套路由結(jié)構(gòu)。

補充知識：vue-router重定向redirect和別名alias的用法區(qū)分

vue-router是vue框架的重要且常用的插件之一，用于單頁面應(yīng)用的路徑打包管理。項目中常會用到redirect和alias以做“頁面假動作”跳轉(zhuǎn)。

重定向redirect

顧名思義，這個屬性用于重定向頁面跳轉(zhuǎn)路徑。簡單說就是設(shè)置了一個路由，它有自己的路徑，但重定向跳轉(zhuǎn)至另一個路由。

export default new Router({ routes: [ { path: ’/’, name: ’HelloWorld’, component:HelloWorld }, { path:’/gohome’, redirect:’/’ } ]})

<router-link to='/'>Home</router-link>|

<router-link to='/gohome'>goHome</router-link>

如例子，“/gohome”的路由結(jié)果跳轉(zhuǎn)至“/”根目錄路由，最終結(jié)果就是兩個路由顯示的頁面內(nèi)容完全一致。注意：包括瀏覽器地址欄的路由原路徑也隨之改變顯示為重定向的路徑！

別名alias

其實就是為某個路由增加一個“花名”——新路徑，使得不管應(yīng)用到哪條路徑最終都顯示同一個路由的頁面內(nèi)容。舉例：

export default new Router({ routes: [ { path:’/hi1’, component:hi1, alias:’/Jsxj’ } ]})

<router-link to='/hi1'>Hi1</router-link>|

<router-link to='/Jsxj'>Jsxj</router-link>

如上，指向別名alias路徑的’router-link’會跳轉(zhuǎn)至path路徑的路由頁面，最終兩個路徑都會顯示相同的頁面內(nèi)容。但區(qū)別于重定向的一點是，瀏覽器地址欄會保留alias的路徑不會隨之變動！ 這可能是客戶往往更想看到的東西。

另外，重定向帶參數(shù)的目標路由時，該路由的路徑中參數(shù)名應(yīng)與目標路由路徑參數(shù)名一致，才可以向目標路由傳遞對應(yīng)參數(shù)值。

以上這篇Vue路由 重定向和別名的區(qū)別說明就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。