路由重定向redirect的基本使用

路由重定向redirect

重定向：

使得一个路由地址A与另一个路由地址B联系起来，执行A的时候会跳转执行B。

关键字：redirect。

用户第一次访问网站页面("/根目录"首页)时，地址栏里边没有“#锚点”的信息，也就没有对应的组件用于显示，用户体验不好，现在可以通过重定向实现一种效果，即当浏览器没有任何 #锚点信息时，默认也给显示一个组件。

语法：

var router = new VueRouter({
  routes:[
    // {path:'/', redirect:'跳转到的路由地址'}
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home}
  ]
})

执行/根目录路由地址时，就跳转执行/home路由地址 ，进而把对应的组件给显示出来。

注意：

1. 不仅 “/” 可以被重定向，其他普通路由地址互相也可以重定向。
2. 重定向会使得路由再次发生调用请求。

案例：

在没有任何#锚点信息的时候，显示首页组件。

const router = new VueRouter({
  routes:[
    // {path:'路由地址A', redirect:'路由地址B'}  // A 重定向执行 B
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home},
  ]
})