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