重定向

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

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

重定向的目標(biāo)也可以是一個命名的路由：

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

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

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

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

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

別名

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

/a 的別名是 /b，意味著，當(dāng)用戶訪問 /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)。

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

vue-router是vue框架的重要且常用的插件之一，用于單頁面應(yīng)用的路徑打包管理。項(xià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

其實(shí)就是為某個路由增加一個“花名”——新路徑，使得不管應(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ū)別于重定向的一點(diǎn)是，瀏覽器地址欄會保留alias的路徑不會隨之變動！ 這可能是客戶往往更想看到的東西。

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

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

最新評論