介紹

Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：

  • 巢狀的路由/視圖表
  • 模組化的、基於元件的路由配置
  • 路由引數、查詢、萬用字元
  • 基於 Vue.js 過渡系統的檢視過渡效果
  • 細粒度的導航控制
  • 帶有自動啟用的 CSS class 的連結
  • HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
  • 自定義的滾動條行為

安裝

安裝命令

  1. npm install vue-router --save

如果在一個模組化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  4. Vue.use(VueRouter)

模組化使用

之前我們使用腳手架vue-cli建立專案時，實際已經配置好了router，建立完專案後，在專案根目錄下會有一個router資料夾，router下有一個index.js檔案，內容如下：

  1. import Vue from "vue";
  2. import VueRouter from "vue-router";
  3. import Home from "../views/Home.vue";
  5. // 1. 當我們使用其他外掛的時候，就必須使用Vue.use安裝外掛
  6. Vue.use(VueRouter);
  8. // 2. 定義路由，每個路由應該對映一個元件
  9. const routes = [
  10.   {
  11.     path: "/",
  12.     name: "Home",
  13.     component: Home,
  14.   },
  15.   {
  16.     path: "/about",
  17.     name: "About",
  18.     component: About
  19.   },
  20. ];
  22. // 3. 建立router例項
  23. const router = new VueRouter({
  24.   // 配置路由和元件之間的應用關係
  25.   routes,  // (縮寫) 相當於 routes: routes
  26. });
  28. // 4. 匯出router物件，然後在main.js中引用
  29. export default router;

這個檔案是專門配置路由的，最後將router物件匯出後，我們在專案的main.js中引用即可

  1. import Vue from "vue";
  2. import App from "./App.vue";
  3. import router from "./router";
  5. Vue.config.productionTip = false;
  7. new Vue({
  8.   router,  // 在vue例項中新增router物件，就可以使用路由了
  9.   render: (h) => h(App),
  10. }).$mount("#app");

我們的2個元件程式碼About和Home程式碼如下：

  1. // About.vue
  2. <template>
  3.   <div class="about">
  4.     <h1>About</h1>
  5.   </div>
  6. </template>
  8. <script>
  9. export default {
  10.   name: "About"
  11. }
  12. </script>
  14. <style scoped>
  15. </style>
  17. // Home.vue
  18. <template>
  19.   <div class="home">
  20.     <h1>Home</h1>
  21.   </div>
  22. </template>
  24. <script>
  26. export default {
  27.   name: "Home",
  28. };
  29. </script>
  31. <style scoped>
  32. </style>

最後我們在App.vue中，寫入如下程式碼：

  1. <template>
  2.   <div id="app">
  3.     <router-link to="/">首頁</router-link>
  4.     <router-link to="/about">關於</router-link>
  5.     <router-view></router-view>
  6.   </div>
  7. </template>
  9. <style lang="scss">
  10. </style>

使用<router-link>來載入連結，然後使用to表示跳轉的連結。最終會把<router-link>渲染成<a>標籤。

<router-view>是路由的出口，也就是相應url下的程式碼會被渲染到這個地方來。

HTML5 history模式

但是當我們啟動程式，訪問頁面的時候，url地址上會出現#



這是因為vue-router 預設 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新載入。

如果不想要很醜的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面。

  1. const router = new VueRouter({
  2.   mode: 'history',
  3.   routes: [...]
  4. })

我們只需在router資料夾下的index.js中新增mode為history即可，之後重新訪問，http://localhost:8080/就不會有#號了

注意：history模式還需要後臺配置支援。因為我們的應用是個單頁客戶端應用，如果後臺沒有正確的配置，當用戶在瀏覽器直接訪問其他url地址就會返回 404，這就不好看了。

所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。