Vue Router 是 Vue.js 官方路由管理器，為單頁應用（SPA）提供了無縫的頁面切換體驗。本文將深入解析其核心功能與最佳實踐。

一、基礎配置

1. 安裝與初始化

npm install vue-router

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'Vue.use(Router)const router = new Router({mode: 'history', // 可選 hash/historyroutes: [{path: '/',name: 'Home',component: Home}]
})

二、核心功能

1. 動態路由匹配

{path: '/user/:id',component: User,props: true // 將參數作為props傳遞
}

2. 嵌套路由

{path: '/dashboard',component: Dashboard,children: [{ path: 'profile', component: Profile }]
}

3. 編程式導航

// 基本跳轉
this.$router.push('/home')// 帶參數跳轉
this.$router.push({ name: 'User', params: { id: 123 } })// 替換當前路由
this.$router.replace('/login')

三、高級特性

1. 路由守衛

// 全局前置守衛
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated) {next('/login')} else {next()}
})// 組件內守衛
export default {beforeRouteEnter(to, from, next) {// 不能訪問thisnext(vm => {// 通過vm訪問組件實例})}
}

2. 路由懶加載

{path: '/about',component: () => import('@/views/About.vue')
}

3. 滾動行為控制

const router = new Router({scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { x: 0, y: 0 }}}
})

四、最佳實踐

1. 路由分層：按功能模塊組織路由

2. 權限控制：結合路由元信息(meta)實現

3. 過渡動畫：使用<transition>包裝<router-view>

4. 404處理：配置通配符路由

{path: '*',component: NotFound
}

? ? ? ?

五、常見問題解決方案

1. 路由重復：

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}

提示：對于大型項目，建議將路由配置拆分為多個模塊，并使用 webpack 的代碼分割功能優化性能優化應用加載性能提供流暢的用戶體驗

希望這篇博客對你有所幫助，如果有任何問題和建議歡迎留言討論?

1. 動態添加路由：

   router.addRoutes([{ path: '/new', component: NewComponent }
   ])

   掌握 Vue Router 的這些核心功能，你將能夠：

2. 構建復雜的頁面導航結構

3. 實現精細的訪問控制