重定向

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

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

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

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

甚至是一個方法，動態返回重定向目標：

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

注意導航守衛并沒有應用在跳轉路由上，而僅僅應用在其目標上。在下面這個例子中，為 /a 路由添加一個 beforeEach 或 beforeLeave 守衛并不會有任何效果。

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

別名

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

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

上面對應的路由配置為：

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

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

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

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

重定向redirect

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

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”的路由結果跳轉至“/”根目錄路由，最終結果就是兩個路由顯示的頁面內容完全一致。注意：包括瀏覽器地址欄的路由原路徑也隨之改變顯示為重定向的路徑！

別名alias

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

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’會跳轉至path路徑的路由頁面，最終兩個路徑都會顯示相同的頁面內容。但區別于重定向的一點是，瀏覽器地址欄會保留alias的路徑不會隨之變動！ 這可能是客戶往往更想看到的東西。

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

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