Hello App!

Source code

1. 0. 如果使用模組化機制编程，導入Vue和VueRouter，要呼叫 Vue.use(VueRouter)
   

   
   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)
   //your code
         

2. 定義(要路由的)組件。可以import進來

   const Foo = { template: '< div>foo< /div>' }
   const Bar = { template: '< div>bar< /div>' }

3. 定義路由，每一個路由應該對應到一個組件，
   其中component可以由Vue.extend()建構，
   或者是一個物件。
   之後會再討論巢狀式路由

   const routes = [
   { path: '/foo', component: Foo },
   { path: '/bar', component: Bar }
   ]

4. 建立 router 實例，傳進 routes 配置參數。

   onst router = new VueRouter({
   routes // （缩写）相当于 routes: routes
   })

5. 建立Vue實例，傳進 router 配置參數，注入路由功能

   const app = new Vue({
   router
   }).$mount('#app')

使用 router-link 組件來渲染要route的連結
傳入to指定連結(網址)，router-link最後會渲染成a

< router-link to="/foo">Go to Foo< /router-link>
< router-link to="/bar">Go to Bar< /router-link>

使用< router-view>< /router-view>，當作是路由指定渲染組件所顯示的地方。

< router-view>< /router-view>

Demo