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>