重定向

重定向也是通過(guò) routes 配置來(lái)完成，下面例子是從 /a 重定向到 /b：

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

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

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

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

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

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

其它高級(jí)用法，請(qǐng)參考例子。

別名

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

/a 的別名是 /b，意味著，當(dāng)用戶訪問(wèn) /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶訪問(wèn) /a 一樣。

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

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

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

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

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

重定向redirect

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

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é)果就是兩個(gè)路由顯示的頁(yè)面內(nèi)容完全一致。注意：包括瀏覽器地址欄的路由原路徑也隨之改變顯示為重定向的路徑！

別名alias

其實(shí)就是為某個(gè)路由增加一個(gè)“花名”——新路徑，使得不管應(yīng)用到哪條路徑最終都顯示同一個(gè)路由的頁(yè)面內(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'會(huì)跳轉(zhuǎn)至path路徑的路由頁(yè)面，最終兩個(gè)路徑都會(huì)顯示相同的頁(yè)面內(nèi)容。但區(qū)別于重定向的一點(diǎn)是，瀏覽器地址欄會(huì)保留alias的路徑不會(huì)隨之變動(dòng)！ 這可能是客戶往往更想看到的東西。

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

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

最新評(píng)論