vue全家桶進階之路18：Vue Router

　　Vue Router 是 Vue.js 的官方路由管理器，它可以幫助我們實作單頁應用（Single Page Application，SPA）的前端路由，

　　Vue Router 基于 Vue.js 的組件化思想，將路由視為組件，并提供了多種方式來定義路由和渲染組件，Vue Router 可以通過 URL 地址來控制頁面的顯示內容，而不需要重繪整個頁面，它也支持通過編程的方式進行路由跳轉和引數傳遞，

　　Vue Router 的主要特點包括：

1. 1. 嵌套路由：Vue Router 支持嵌套路由，可以將路由配置進行組合和嵌套，從而實作更加靈活和復雜的頁面布局，

   2. 路由引數：Vue Router 支持動態路由引數，可以通過引數傳遞來控制頁面的顯示內容，

   3. 編程式路由：Vue Router 支持編程式路由，可以通過撰寫代碼來進行路由跳轉和引數傳遞，

   4. 導航守衛：Vue Router 支持導航守衛，可以在路由跳轉前、后、以及跳轉取消時執行相應的鉤子函式，

   5. 路由懶加載：Vue Router 支持路由懶加載，可以根據需要動態加載路由組件，從而提高應用的性能和加載速度，

　　總之，Vue Router 是 Vue.js 的官方路由管理器，它可以幫助我們實作單頁應用的前端路由，并提供了多種方式來定義路由和渲染組件，支持嵌套路由、動態路由引數、編程式路由、導航守衛、路由懶加載等特性，是 Vue.js 開發中不可或缺的重要組件之一，

下面是一個簡單的 Vue Router 實體，演示了如何通過 Vue Router 實作路由跳轉和引數傳遞：

1. 首先，在專案中安裝 Vue Router，可以使用 npm 或 yarn 安裝：

   • npm install vue-router

2. 然后，在 Vue.js 專案中創建一個 router.js 檔案，用于配置路由：

   • import Vue from 'vue'
     import Router from 'vue-router'
     import Home from './views/Home.vue'
     import About from './views/About.vue'
     
     Vue.use(Router)
     
     export default new Router({
       routes: [
         {
           path: '/',
           name: 'home',
           component: Home
         },
         {
           path: '/about/:id',
           name: 'about',
           component: About
         }
       ]
     })

     在這個例子中，我們通過 import 匯入了 Vue、Vue Router 以及兩個頁面組件 Home 和 About，然后通過 Vue.use(Router) 注冊了 Vue Router 插件，并創建了一個 Router 實體，在 Router 實體的 routes 配置中，我們定義了兩個路由規則，分別對應了兩個頁面組件，其中，第二個路由規則中的 :id 表示這是一個動態路由引數，可以通過引數傳遞來控制頁面的顯示內容，

3. 在 main.js 檔案中引入 router.js，并將 router 物件掛載到 Vue 實體中：

   • import Vue from 'vue'
     import App from './App.vue'
     import router from './router'

     new Vue({
     router,
     render: h => h(App)
     }).$mount('#app')

     在這個例子中，我們通過 import 引入了 router.js，然后將 router 物件掛載到 Vue 實體中的 router 屬性中，這樣，就可以在 Vue 實體中使用 Vue Router 提供的路由功能了，

4. 在頁面組件中使用路由跳轉和引數傳遞：
   • Home.vue：

   • <template>
       <div>
         <h1>Home Page</h1>
         <button @click="gotoAbout">Go to About Page</button>
       </div>
     </template>
     
     <script>
     export default {
       methods: {
         gotoAbout() {
           this.$router.push({ name: 'about', params: { id: 123 }})
         }
       }
     }
     </script>

      

   • About.vue：

   • <template>
       <div>
         <h1>About Page</h1>
         <p>ID: {{ $route.params.id }}</p>
       </div>
     </template>
     
     <script>
     export default {
       mounted() {
         console.log(this.$route.params.id)
       }
     }
     </script>

     在這個例子中，我們在 Home 頁面組件中定義了一個按鈕，當按鈕被點擊時，使用 this.$router.push 方法進行路由跳轉，并通過 name 和 params 屬性指定了目標路由和路由引數，在 About 頁面組件中，我們通過 $route.params.id 來獲取路由引數，并在 mounted 鉤子函式中輸出引數值，

這就是一個簡單的 Vue Router 實體，演示了如何通過 Vue Router 實作路由跳轉和引數傳遞，需要注意的是，Vue Router 的使用方法還有很多種，可以根據具體的業務需求選擇不同的方法，

　　　　　　例如，我們還可以通過路由鉤子函式來對路由進行攔截和處理：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about/:id',
      name: 'about',
      component: About
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log('路由攔截：', to.name)
  next()
})

export default router

在這個例子中，我們通過 router.beforeEach 方法定義了一個路由攔截器，當用戶進行路由跳轉時，這個方法會被觸發，可以在這個方法中進行一些業務邏輯處理，例如記錄用戶訪問記錄、校驗用戶權限等，當處理完成后，需要呼叫 next 方法，才能繼續進行路由跳轉，

除了 beforeEarch 方法，Vue Router 還提供了很多其他的路由鉤子函式，例如 afterEach、beforeResolve、beforeEnter 等，可以根據具體的業務需求選擇不同的鉤子函式，

總的來說，Vue Router 是 Vue.js 中非常重要的一個插件，它提供了路由功能和路由鉤子函式，可以方便地實作頁面之間的跳轉和傳參，并且可以對路由進行攔截和處理，提高應用的可用性和安全性，

標籤：其他

上一篇：前端設計模式——解釋器模式

下一篇：聊聊前端性能指標那些事兒