Vue路由 重定向和別名的區別說明

重定向

重定向也是通過 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路由 重定向和別名的區別說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。