8. Vue 路由的重定向与别名

Vue 路由的重定向与别名

• 重定向

  当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

• 别名

  /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样

• 示例

  <div id="app">
    <router-link :to="'first'">Go First</router-link>
    <br/>
    <router-link :to="'second'">Go Second</router-link>
    <br/>
    <router-link :to="'redirect'">Redirect Second</router-link>
    <br/>
    <router-link :to="'alias'">Alias Second</router-link>
    <router-view></router-view>
  </div> 
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  

  const First = { template: '<div>First Page</div>' } 
  const Second = { template: '<div>Second Page</div>' } 
  routes = [
    { path: '/first', name: "first", component: First },  
    { path: "/second", name: "second", component: Second },
    // ===================重定向路由=======================
    { path: "/redirect", name: "redirect", redirect: '/second'},
    // { path: "/redirect", redirect: { name: 'second' }},
    // { path: "/redirect", redirect: to=>{
    //     console.log(to)
    //     return '/second'
    // }}
    // ===================别名路由=======================
    { path: "/second", name: "alias", alias: '/alias' }
  ]
  router = new VueRouter({
    routes
  })
  const app = new Vue({
    router
  }).$mount('#app')