vue中路由的重定向

路由匹配展示的過程：

• 當點擊a標簽（或者直接修改瀏覽器地址欄中的哈希值）會改變哈希值
• 當哈希值發生改變，Vue路由就會監聽到這個變化
• 當路由監聽到哈希值改變以后，就會用配置好的路由規則來匹配當前的哈希值
• 當哈希值被匹配成功，就會將當前路由規則對應的組件展示在頁面中 router-view 中

  <div id="app">
    <ul>
      <li>
        <router-link to="/home">首頁</router-link>
      </li>
    </ul>

    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    // 路由默認的 path 為： /
    const Home = {
      template: `
        <h1>這是 Home 組件</h1>
      `
    }

    const router = new VueRouter({
      routes: [
        // 重定向：
        // / 是默認的路徑，頁面第一打開的時候，就會訪問這個路徑
        // 當這個路徑匹配成功后，通過指定的 redirect 就可以重定向到其他路由了
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home }
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {

      },
      router
    })
  </script>