VueRouter的使用技巧和最佳實踐

Vue.js 是一款輕量級MVVM框架，可以幫助我們非常方便的構建單頁應用，而 Vue Router 可以幫助我們實現單頁應用的路由功能。

一、路由基礎

1、創建Router實例

在使用Vue Router 之前，我們需要先創建一個Router實例。在main.js文件中引入Vue和Vue Router，並使用use()方法安裝插件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [...] // 路由配置
})

代碼解釋：

• 首先我們需要引入Vue和VueRouter
• 然後調用Vue.use()方法安裝VueRouter插件
• 創建一個VueRouter實例，並傳遞routes參數，routes是一個路由配置數組，包含多個路由對象配置
• 在最後導出VueRouter實例，以便在其他地方使用

2、路由配置

在創建Router實例的時候，我們需要配置routes參數。routes是一個路由配置數組，包含多個路由對象配置

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

代碼解釋：

• 我們定義了2個路由對象，即 /home 和 /about
• 每個路由對象包含3個屬性：path、name和component
• path代表路由路徑，name代表路由名稱，component代表路由要渲染的組件

3、路由嵌套

在一些大型的應用中，我們需要使用到路由嵌套，這樣能夠更好的管理我們的路由配置。Router 嵌套還可以實現多人協同作業，路由規則按組或模塊分開，不同的人維護不同的文件，避免人為衝突。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'profile',
        name: 'Profile',
        component: Profile
      },
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: Dashboard
      }
    ]
  }
]

代碼解釋：

• 在主路由下，我們添加了children數組，包含兩個子路由
• 每個子路由不再以/開頭，而是以父路由的路徑/作為前綴，同時子路由的component也是自己的組件。
• 比如在這個例子中，子路由的路徑就是 /profile 和 /dashboard ，對應的組件是 Profile 和 Dashboard

二、導航

1、跳轉到路由

我們可以通過 router-link 標籤在 Vue 模板中聲明一個鏈接，使用戶跳轉到不同的路由。Vue Router 根據 link 的 href 屬性自動激活對應的路由，Vue 會自動阻止默認事件的發生，所以不需要使用 v-on:click.prevent

<router-link to="/home">Home</router-link>

代碼解釋：

• router-link 是Vue Router 提供的組件，to屬性是路由路徑，對應的是上文配置的 path 屬性

2、編程式導航

我們也可以在代碼中進行路由導航，比如跳轉到另外一個路由，並且路徑可以動態設置。這種方式叫做編程式導航

router.push('/home')

代碼解釋：

• 使用 router.push 進行編程式導航，以 /home 為例

3、參數傳遞

在 Vue Router 中，可以通過在路由路徑中加入參數來傳遞參數。這些參數可以是必須的，也可以是可選的。在路由配置項中，可以通過:來指定參數名，如 /user/:id 中的 :id

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

代碼解釋：

• 在路由配置中，我們使用 /user/:id 定義了一個路由，其中 :id 表示參數
• 在路由鏈接中，可以使用 $route.params.id 獲取傳遞的參數
• 在編程式導航中，可以使用 params 屬性傳遞參數

// links
<router-link :to="'/user/' + user.id">{{ user.name }}</router-link>

// programmatic navigation
this.$router.push({ name: 'User', params: { id: this.userId } })

三、路由鉤子

路由鉤子就是在路由導航過程中的一些鉤子函數，可以控制路由跳轉、路由數據變化等方面的行為

1、全局前置守衛

全局前置守衛是在路由導航之前調用的，可以用於身份驗證，日誌記錄等。多個全局前置守衛會按照註冊順序依次執行

router.beforeEach((to, from, next) => {
  // to 和 from 都是路由對象
  // to 是導航到的路由對象
  // from 是導航來源的路由對象
  // next 是一個函數，調用該函數，才會執行導航操作
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 判斷是否需要身份驗證，未登錄則跳轉到登錄頁
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 不需要身份驗證
  }
})

代碼解釋：

• 在全局前置守衛中，我們可以根據 to 和 from 來判斷是否需要身份驗證
• 如果需要身份驗證，且未登錄，則跳轉到登錄頁面，可以使用 next({path: ‘/login’}) 轉到登錄頁面
• 如果不需要身份驗證，直接調用 next()

2、全局後置鉤子

全局後置鉤子是在路由導航之後調用的，無法取消導航行為，也無法控制路由跳轉。只能接收到路由導航的成功或失敗。

router.afterEach((to, from) => {
  // to 和 from 都是路由對象
  // 這裡可以添加一些日誌記錄等操作
})

3、組件內路由鉤子

除了全局路由鉤子，Vue Router 還提供了多個組件內的路由鉤子函數，它們是定義在組件內部的方法，可以在特定組件內使用

export default {
  beforeRouteEnter (to, from, next) {
    // 在路由進入該組件前調用
    // 無法訪問組件實例 this
    next() // 通過調用next()執行路由操作
  },

  beforeRouteUpdate (to, from, next) {
    // 在當前組件重新渲染時調用
    // 可以訪問組件實例 this
    next()
  },

  beforeRouteLeave (to, from, next) {
    // 在路由離開該組件時調用
    // 可以訪問組件實例 this
    next()
  }
}

四、代碼拆分

在一個單頁應用中，隨著應用變得越來越大，JS 文件也會越來越大，這時候我們可以將不同的路由拆分成不同的代碼塊，僅在需要的時候再載入對應的組件。

const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

代碼解釋：

• 在路由組件中使用動態導入語法，即使用 () => import(…) 的方式導入組件，在需要的時候才會載入。

結語

以上是關於VueRouter使用技巧和最佳實踐的詳細闡述，包括路由基礎、導航、路由鉤子、代碼拆分等方面。通過靈活使用VueRouter，能夠讓我們更好的構建單頁應用。