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这个原理是一样的，只不过很久没用比较模糊了，在此记一下。