Vue-router中redirect屬性的理解

vue-router API文檔對routes.redirect屬性的說明比較簡潔，如下：

//RouteConfig 的類型定義：

interface RouteConfig = {
  path: string,
  component?: Component,
  name?: string, // 命名路由
  components?: { [name: string]: Component }, // 命名視圖組件
  redirect?: string | Location | Function,
  props?: boolean | Object | Function,
  alias?: string | Array<string>,
  children?: Array<RouteConfig>, // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void,
  meta?: any,

  // 2.6.0+
  caseSensitive?: boolean, // 匹配規則是否大小寫敏感？(默認值：false)
  pathToRegexpOptions?: Object // 編譯正則的選項
}

 

我對其中redirect路徑的最終指向不是很明白，最后在查看vue-router的常用用例中（https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js）找到了如下代碼，截圖如下：

 

 

 

 

 

 

 

 

 

 

 

 

 

這里注釋的意思是：

1、redirect不帶 '/' 的: 路徑相對於父級路由，最終重定向到的是同級路由foo(兄弟路由)。

2、帶 '/' 的:路徑是相對於服務器路由的，最終重定向地址為：服務器地址+'/bar'。

 

於是乎，我在本地寫個一個demo測試，求證結果是對的！

 

其實這個知識點在幾年前學習servlet相對路徑時學習過，跟vue-router這個原理是一樣的，只不過很久沒用比較模糊了，在此記一下。