Vue.js + Vue Router簡單例項

使用 Vue.js ，我們已經可以通過組合元件來組成應用程式，當你要把 Vue Router 新增進來，我們需要做的是，將元件 (components) 對映到路由 (routes)，然後告訴 Vue Router 在哪裡渲染它們。

1， html部分

在vue-router中, 我們看到它定義了兩個標籤 和來對應點選和顯示部分。 就是定義頁面中點選的部分， 定義顯示部分，就是點選後，區配的內容顯示在什麼地方。所以 還有一個非常重要的屬性 to，定義點選之後，要到哪裡去。

<script src="https://unpkg.com/vue/dist/vue.js"
 
></script><!--引入vue.js檔案-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><!--引入vue-router.js檔案-->

<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>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的元件將渲染在這裡 -->
  <router-view></router-view>
</div>

2， js部分

第一步定義路由元件。
第二步定義route, 一條路由的實現。它是一個物件，由兩個部分組成： path和component. path 指路徑，component 指的是元件。我們這裡有兩條路由，組成一個routes。
第三步建立 router 例項，然後傳router配置。
第四步建立和掛載根例項。

// 0. 如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)

// 1. 定義 (路由) 元件。
// 可以從其他檔案 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是
// 通過 Vue.extend() 建立的元件構造器，
// 或者，只是一個元件配置物件。
// 我們晚點再討論巢狀路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 建立 router 例項，然後傳 `routes` 配置
// 你還可以傳別的配置引數, 不過先這麼簡單著吧。
const router = new VueRouter({
  routes // (縮寫) 相當於 routes: routes
})

// 4. 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現在，應用已經啟動了！

這樣一個簡單的vue-router就完成了。