vue中路由的基本使用

路由的使用步驟：

• 安裝: npm i -S vue-router
• 引入 vue-router
• 創建路由規則
• 將路由實例與vue實例關聯到一起
• 配置路由規則
  哈希值 和 組件 的對應關系
• 指定路由出口（ 表示將當前匹配的路由展示在頁面中的哪個位置 ）

  <div id="app">
    <ul>
      <li>
        <!-- 入口：實際上就是一個a標簽 -->
        <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>
    const Home = Vue.component('home', {
      template: `
        <h1>這是 Home 組件</h1>
      `
    })

    // 創建路由實例
    const router = new VueRouter({
      routes: [
        { path: '/home', component: Home }
      ]
    })

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

      },
      // 將路由與實例關聯到一起
      router
    })
  </script>