三、路由的重定向和路由的别名 ------ 2019-09-10

1、路由的重定向：重定向也就是重新定义方向，也就是我们访问路由 /a 的时候，我们将这个访问路径重新定义到其他路由；

注意：导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在下面这个例子中，为 /a 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。

2、如何重定向：

const routes = [
  {
    path:'/',
    redirect:'/home'
  },
  {
    path: '/home',
    component: Home
  }
]
// 在对应的路由规则中，配置一个规则，当我们访问根路径的时候，我们使用redirect属性就可以指定我们需要
// 重定向到的页面

3、路由别名：路由的别名字面意思就是给路由另外的名字，也就是当前访问的路由是 /a；但是我们想给路由 /a起一个别名 /b;这时url中显示的是路径 /b，但加载的是路由 /a 对应的组件；

  {
    path: '/About',
    component: About,
    alias: '/helloWorld'
  }

首页
关于
HelloWorld

// 当我们点击helloWorld访问这个路由的时候，页面中路由显示的是helloWorld,但是加载的是About组件；
// 这个时候要求没有helloWorld的路由规则，如果有这个规则肯定就根据规则去匹配了；

4、嵌套路由中，如果子路由也进行了重定向，父路由则不能配置 name 属性，否则会报警告：

 {
    path: '/home',
    // name: 'home', 这种情况下 home 组件作为父级路由是不能配置name属性的
    component: Home,
    children: [{
        path: '',
        redirect: 'homeHeader'
      },
      {
        path: 'homeHeader',
        name: 'homeHeader',
        component: HomeHeader
      }, {
        path: 'homeMain',
        name: 'homeMain',
        component: HomeMain
      }
    ]
  },

[vue-router] Named Route 'Home' has a default child route. When navigating to this named route (:to="{name: 'Home'"),
 the default child route will not be rendered. 
Remove the name from this route and use the name of the default child route for named links instead.