Vue Router創建方法及簡單案例

創建基本例子

用 Vue.js + Vue Router 創建單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當你要把 Vue Router 添加進來，我們需要做的是，將組件 (components) 映射到路由 (routes)，然後告訴 Vue Router 在哪裏渲染它們。

創建步驟

0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)
1. 定義 (路由) 組件。 可以從其他文件 import 進來
2. 定義路由
   每個路由應該映射一個組件。 其中"component" 可以是
   通過 Vue.extend() 創建的組件構造器，
   或者，只是一個組件配置對象。
   我們晚點再討論嵌套路由。
3. 創建 router 實例，然後傳 routes 配置
   你還可以傳別的配置參數, 不過先這麼簡單着吧。
4. 創建和掛載根實例。
   記得要通過 router 配置參數注入路由，
   從而讓整個應用都有路由功能

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<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>

JavaScript

// 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')

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

通過注入路由器，我們可以在任何組件內通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當前路由：

// Home.vue
export default {
  computed: {
    username () {
      // 我們很快就會看到 `params` 是什麼
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

該文檔通篇都常使用 router 實例。留意一下 this.$router 和 router 使用起來完全一樣。我們使用 this.$router 的原因是我們並不想在每個獨立需要封裝路由的組件中都導入路由。

要注意，當 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active。查看 API 文檔 學習更多相關內容。

轉載自官方文檔：https://router.vuejs.org/zh/guide/#javascript