vue-router的簡單使用

1.在HTML中

<div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- 使用 router-link 組件來導航. -->
      <!-- 經過傳入 `to` 屬性指定連接. -->
      <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
      <router-link to="/son">Go to Son</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這裏 tab-content-->
    <router-view></router-view>
  </div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- vue-router 是vue插件 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
  // 0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

  // 1. 定義 (路由) 組件。
  // 能夠從其餘文件 import 進來
  // 組件的簡單寫法
  const Foo = {
    // 模板
    template: '<div>foo</div>'
  }
  const Bar = {
    template: '<div>bar</div>'
  }
  const Son = {
    template: '<div>Son</div>'
  }

  // 2. 定義路由 
  // url跟組件的對應關係
  const routes = [{
      path: '/foo',
      component: Foo
    },
    {
      path: '/bar',
      component: Bar
    },
    {
      path: '/son',
      component: Son
    }
  ]

  // 3. 建立 router 實例，而後傳 `routes` 配置
  // 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
  const myrouter = new VueRouter({
    routes // (縮寫) 至關於 routes: routes
  })

  // 4. 建立和掛載根實例。
  // 記得要經過 router 配置參數注入路由，
  // 從而讓整個應用都有路由功能
  const app = new Vue({
    el:"#app",
    // 告訴頁面中的頂級Vue實例，按照這個路由對象的url->組件的關係 渲染內容
    router:myrouter
    
  })
  // $mount等同於 el：‘選擇器’
  // .$mount('#app')

  // 如今，應用已經啓動了！
</script>