资料库 – 中文知识库

Vue3与Vue Router 4完美搭配教程 从零开始掌握路由配置与实战技巧

—

by

admin
in

引言：为什么需要Vue Router 4？
在现代Web开发中，单页面应用（SPA）已经成为主流。Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，让构建单页面应用变得轻而易举。Vue Router 4是专门为Vue 3设计的版本，它带来了许多改进和新特性，如更好的TypeScript支持、组合式API集成等。
本教程将从零开始，带你深入了解Vue Router 4的配置和使用，并通过实战技巧帮助你掌握路由管理的核心概念。无论你是Vue新手还是有经验的开发者，都能从中获益。
1. 环境准备与安装
1.1 创建Vue 3项目
首先，确保你已经安装了Node.js（版本16.x或更高）和npm。然后使用Vite创建一个新的Vue 3项目：
npm create vite@latest my-vue-app — –template vue
cd my-vue-app
npm install
1.2 安装Vue Router 4
在项目目录中，运行以下命令安装Vue Router 4：
npm install vue-router@4
1.3 项目结构
建议的项目结构如下：
src/
├── assets/
├── components/
├── router/
│ └── index.js
├── views/
│ ├── Home.vue
│ ├── About.vue
│ └── User.vue
├── App.vue
└── main.js
2. 基础路由配置
2.1 创建路由实例
在
src/router/index.js
中，我们创建并导出路由实例：
import { createRouter, createWebHistory } from ‘vue-router’
import Home from ‘../views/Home.vue’
import About from ‘../views/About.vue’

// 定义路由配置
const routes = [
{
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path: ‘/about’,
name: ‘About’,
component: About
}
]

// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes
})

export default router
2.2 在main.js中引入路由
import { createApp } from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’

const app = createApp(App)
app.use(router)
app.mount(‘#app’)
2.3 在App.vue中添加路由视图

3. 动态路由与嵌套路由
3.1 动态路由参数
动态路由允许你通过URL参数访问特定资源。例如，用户详情页：
// router/index.js
const routes = [
// …其他路由
{
path: ‘/user/:id’,
name: ‘User’,
component: () => import(‘../views/User.vue’)
}
]
在User.vue中，你可以通过
route.params.id
访问参数：


3.2 嵌套路由
嵌套路由用于构建具有父子关系的页面结构。例如，用户管理页面包含用户列表和用户详情：
// router/index.js
const routes = [
{
path: ‘/users’,
component: () => import(‘../views/Users.vue’),
children: [
{
path: ”, // 默认子路由
name: ‘UserList’,
component: () => import(‘../views/UserList.vue’)
},
{
path: ‘:id’,
name: ‘UserDetail’,
component: () => import(‘../views/UserDetail.vue’)
}
]
}
]
在Users.vue中，你需要添加

来显示子路由：

4. 编程式导航与命名路由
4.1 编程式导航
编程式导航允许你在代码中跳转路由。Vue Router 4提供了
router.push
等方法：


4.2 命名路由
命名路由让路由跳转更易维护：
// router/index.js
const routes = [
{
path: ‘/user/:id’,
name: ‘User’,
component: () => import(‘../views/User.vue’)
}
]
使用命名路由跳转：
router.push({ name: ‘User’, params: { id: 123 } })
5. 导航守卫
5.1 全局前置守卫
全局前置守卫在每次导航前执行，常用于权限验证：
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem(‘token’)

if (to.meta.requiresAuth && !isAuthenticated) {
next(‘/login’)
} else {
next()
}
})
5.2 路由独享的守卫
const routes = [
{
path: ‘/dashboard’,
name: ‘Dashboard’,
component: () => import(‘../views/Dashboard.vue’),
beforeEnter: (to, from, next) => {
// 验证逻辑
next()
}
}
]
5.3 组件内守卫

6. 路由元信息与懒加载
6.1 路由元信息（meta）
路由元信息用于存储与路由相关的自定义数据：
const routes = [
{
path: ‘/admin’,
name: ‘Admin’,
component: () => import(‘../views/Admin.vue’),
meta: { requiresAuth: true, role: ‘admin’ }
}
]
在守卫中使用：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next(‘/login’)
} else if (to.meta.role && userRole !== to.meta.role) {
next(‘/403’) // 无权限页面
} else {
next()
}
})
6.2 路由懒加载
路由懒加载可以将不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，从而提高应用性能：
const routes = [
{
path: ‘/about’,
name: ‘About’,
// 懒加载
component: () => import(‘../views/About.vue’)
},
{
path: ‘/admin’,
name: ‘Admin’,
// 懒加载并指定webpackChunkName
component: () => import(/* webpackChunkName: “admin” */ ‘../views/Admin.vue’)
}
]
7. 实战技巧：404页面与路由过渡
7.1 404页面处理
const routes = [
// …其他路由
{
path: ‘/:pathMatch(.*)*’,
name: ‘NotFound’,
component: () => import(‘../views/NotFound.vue’)
}
]
7.2 路由过渡效果
在App.vue中添加过渡效果：

8. 高级技巧：路由滚动行为与历史记录管理
8.1 滚动行为
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} Router 4与Vue 3的完美搭配为开发者提供了强大而灵活的路由管理方案。通过本教程，你已经学习了从基础配置到高级技巧的完整知识体系。记住，实践是掌握这些概念的关键。开始构建你的Vue 3应用吧，Vue Router 4将助你一臂之力！

## 9. 实战案例：构建一个完整的用户管理系统

### 9.1 项目结构规划

让我们通过一个完整的用户管理系统来实践所学知识。项目结构如下：
src/
├── router/
│ ├── index.js
│ └── guard.js
├── views/
│ ├── Login.vue
│ ├── Dashboard.vue
│ ├── Users/
│ │ ├── UserList.vue
│ │ ├── UserDetail.vue
│ │ └── UserEdit.vue
│ ├── Products/
│ │ ├── ProductList.vue
│ │ └── ProductDetail.vue
│ └── NotFound.vue
├── store/
│ └── auth.js
└── App.vue
### 9.2 完整的路由配置

“`javascript
// router/index.js
import { createRouter, createWebHistory } from ‘vue-router’
import { useAuthStore } from ‘../store/auth’

// 路由懒加载
const routes = [
{
path: ‘/login’,
name: ‘Login’,
component: () => import(‘../views/Login.vue’),
meta: { requiresGuest: true }
},
{
path: ‘/’,
component: () => import(‘../views/Dashboard.vue’),
meta: { requiresAuth: true },
children: [
{
path: ”,
name: ‘Dashboard’,
component: () => import(‘../views/DashboardHome.vue’)
},
{
path: ‘users’,
name: ‘Users’,
component: () => import(‘../views/Users/UserList.vue’),
meta: { role: [‘admin’, ‘manager’] }
},
{
path: ‘users/:id’,
name: ‘UserDetail’,
component: () => import(‘../views/Users/UserDetail.vue’),
meta: { role: [‘admin’, ‘manager’] }
},
{
path: ‘users/:id/edit’,
name: ‘UserEdit’,
component: () => import(‘../views/Users/UserEdit.vue’),
meta: { role: [‘admin’] }
},
{
path: ‘products’,
name: ‘Products’,
component: () => import(‘../views/Products/ProductList.vue’)
},
{
path: ‘products/:id’,
name: ‘ProductDetail’,
component: () => import(‘../views/Products/ProductDetail.vue’)
}
]
},
{
path: ‘/403’,
name: ‘Forbidden’,
component: () => import(‘../views/Forbidden.vue’)
},
{
path: ‘/:pathMatch(.*)*’,
name: ‘NotFound’,
component: () => import(‘../views/NotFound.vue’)
}
]

const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
}
})

// 导航守卫
router.beforeEach((to, from, next) => {
const authStore = useAuthStore()
const isAuthenticated = authStore.isAuthenticated
const userRole = authStore.userRole

// 需要登录但未登录
if (to.meta.requiresAuth && !isAuthenticated) {
next({ name: ‘Login’, query: { redirect: to.fullPath } })
return
}

// 已登录但访问登录页
if (to.meta.requiresGuest && isAuthenticated) {
next({ name: ‘Dashboard’ })
return
}

// 权限验证
if (to.meta.role && !to.meta.role.includes(userRole)) {
next({ name: ‘Forbidden’ })
return
}

next()
})

export default router
9.3 登录页面实现

9.4 用户列表与详情页面

9.5 用户详情页面

10. 测试与调试技巧
10.1 路由测试策略
// 测试示例：使用Vue Test Utils
import { mount } from ‘@vue/test-utils’
import { createRouter, createWebHistory } from ‘vue-router’
import { createApp } from ‘vue’
import App from ‘../App.vue’
import Home from ‘../views/Home.vue’

describe(‘路由测试’, () => {
let router

beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: [
{ path: ‘/’, component: Home },
{ path: ‘/about’, component: () => import(‘../views/About.vue’) }
]
})

const app = createApp(App)
app.use(router)
await router.push(‘/’)
})

it(‘应该正确渲染Home组件’, async () => {
const wrapper = mount(App, {
global: {
plugins: [router]
}
})
expect(wrapper.findComponent(Home).exists()).toBe(true)
})
})
10.2 调试技巧
使用Vue Devtools
：检查路由状态和导航历史
路由日志
：在守卫中添加console.log
错误处理
：捕获路由错误
router.onError((error) => {
console.error(‘路由错误:’, error)
// 可以重定向到错误页面
router.push(‘/error’)
})
11. 性能优化最佳实践
11.1 代码分割与懒加载
// 使用webpack魔法注释进行分组
const routes = [
{
path: ‘/admin’,
component: () => import(/* webpackChunkName: “admin” */ ‘../views/Admin.vue’)
},
{
path: ‘/user’,
component: () => import(/* webpackChunkName: “user” */ ‘../views/User.vue’)
}
]
11.2 预加载策略
// router/index.js
const router = createRouter({
history: createWebHistory(),
routes,
// 预加载其他路由
linkActiveClass: ‘active’,
linkExactActiveClass: ‘exact-active’
})

// 在合适的时机预加载
router.beforeEach((to, from) => {
// 预加载可能访问的路由
if (to.name === ‘Dashboard’) {
import(‘../views/Users/UserList.vue’)
import(‘../views/Products/ProductList.vue’)
}
})
12. 常见问题与解决方案
12.1 路由参数变化但组件不重新渲染
问题
：从
/user/1
导航到
/user/2
时，组件不重新创建。
解决方案
：

12.2 动态导入失败
问题
：懒加载组件时出现404错误。
解决方案
：
const routes = [
{
path: ‘/about’,
component: () => import(‘../views/About.vue’).catch(error => {
// 加载失败处理
console.error(‘组件加载失败:’, error)
return import(‘../views/Error.vue’)
})
}
]
12.3 路由守卫死循环
问题
：在守卫中不断重定向导致死循环。
解决方案
：
router.beforeEach((to, from, next) => {
// 避免重定向到当前页面
if (to.path === from.path) {
next()
return
}

// 其他逻辑…
})
13. 与状态管理的集成
13.1 与Pinia集成
// store/auth.js
import { defineStore } from ‘pinia’

export const useAuthStore = defineStore(‘auth’, {
state: () => ({
user: null,
token: null
}),
getters: {
isAuthenticated: (state) => !!state.token,
userRole: (state) => state.user?.role
},
actions: {
async login(username, password) {
// 模拟登录
this.token = ‘fake-token’
this.user = { username, role: ‘admin’ }
},
logout() {
this.token = null
this.user = null
}
}
})
13.2 在路由守卫中使用状态
// router/guard.js
import { useAuthStore } from ‘../store/auth’

export function setupAuthGuard(router) {
router.beforeEach(async (to, from, next) => {
const authStore = useAuthStore()

// 检查是否需要认证
if (to.meta.requiresAuth) {
// 如果没有token，尝试从localStorage恢复
if (!authStore.token) {
const savedToken = localStorage.getItem(‘token’)
if (savedToken) {
authStore.setToken(savedToken)
// 验证token有效性
try {
await authStore.fetchUser()
} catch (error) {
next({ name: ‘Login’ })
return
}
} else {
next({ name: ‘Login’ })
return
}
}
}

next()
})
}
14. 移动端适配与手势导航
14.1 移动端路由优化
// router/index.js
const router = createRouter({
history: createWebHistory(),
routes,
// 移动端优化
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
// 移动端平滑滚动
return {
top: 0,
behavior: ‘smooth’
}
}
}
})
14.2 手势导航支持


15. 总结
通过本教程，我们从零开始学习了Vue Router 4的核心概念和实战技巧。我们涵盖了：
基础配置
：安装、创建路由实例、基础路由定义
高级路由
：动态路由、嵌套路由、命名路由
导航控制
：编程式导航、导航守卫、路由元信息
性能优化
：懒加载、代码分割、预加载
实战案例
：完整的用户管理系统
集成与扩展
：与状态管理、移动端适配
最佳实践
：测试、调试、性能优化
Vue Router 4与Vue 3的组合为现代Web应用提供了强大而灵活的路由解决方案。掌握这些知识将帮助你构建更高效、更易维护的单页面应用。
记住，优秀的路由设计不仅关乎技术实现，更关乎用户体验。合理规划路由结构，优化导航流程，你的应用将更加出色！
# Vue3与Vue Router 4完美搭配教程 从零开始掌握路由配置与实战技巧
引言：为什么需要Vue Router 4？
在现代Web开发中，单页面应用（SPA）已经成为主流。Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，让构建单页面应用变得轻而易举。Vue Router 4是专门为Vue 3设计的版本，它带来了许多改进和新特性，如更好的TypeScript支持、组合式API集成等。
本教程将从零开始，带你深入了解Vue Router 4的配置和使用，并通过实战技巧帮助你掌握路由管理的核心概念。无论你是Vue新手还是有经验的开发者，都能从中获益。
1. 环境准备与安装
1.1 创建Vue 3项目
首先，确保你已经安装了Node.js（版本16.x或更高）和npm。然后使用Vite创建一个新的Vue 3项目：
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
1.2 安装Vue Router 4
在项目目录中，运行以下命令安装Vue Router 4：
npm install vue-router@4
1.3 项目结构
建议的项目结构如下：
src/
├── assets/
├── components/
├── router/
│ └── index.js
├── views/
│ ├── Home.vue
│ ├── About.vue
│ └── User.vue
├── App.vue
└── main.js
2. 基础路由配置
2.1 创建路由实例
在
src/router/index.js
中，我们创建并导出路由实例：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

// 定义路由配置
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]

// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes
})

export default router
2.2 在main.js中引入路由
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')
2.3 在App.vue中添加路由视图

3. 动态路由与嵌套路由
3.1 动态路由参数
动态路由允许你通过URL参数访问特定资源。例如，用户详情页：
// router/index.js
const routes = [
// ...其他路由
{
path: '/user/:id',
name: 'User',
component: () => import('../views/User.vue')
}
]
在User.vue中，你可以通过
route.params.id
访问参数：


3.2 嵌套路由
嵌套路由用于构建具有父子关系的页面结构。例如，用户管理页面包含用户列表和用户详情：
// router/index.js
const routes = [
{
path: '/users',
component: () => import('../views/Users.vue'),
children: [
{
path: '', // 默认子路由
name: 'UserList',
component: () => import('../views/UserList.vue')
},
{
path: ':id',
name: 'UserDetail',
component: () => import('../views/UserDetail.vue')
}
]
}
]
在Users.vue中，你需要添加

来显示子路由：

4. 编程式导航与命名路由
4.1 编程式导航
编程式导航允许你在代码中跳转路由。Vue Router 4提供了
router.push
等方法：


4.2 命名路由
命名路由让路由跳转更易维护：
// router/index.js
const routes = [
{
path: '/user/:id',
name: 'User',
component: () => import('../views/User.vue')
}
]
使用命名路由跳转：
router.push({ name: 'User', params: { id: 123 } })
5. 导航守卫
5.1 全局前置守卫
全局前置守卫在每次导航前执行，常用于权限验证：
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')

if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})
5.2 路由独享的守卫
const routes = [
{
path: '/dashboard',
name: 'Dashboard',
component: () => import('../views/Dashboard.vue'),
beforeEnter: (to, from, next) => {
// 验证逻辑
next()
}
}
]
5.3 组件内守卫

6. 路由元信息与懒加载
6.1 路由元信息（meta）
路由元信息用于存储与路由相关的自定义数据：
const routes = [
{
path: '/admin',
name: 'Admin',
component: () => import('../views/Admin.vue'),
meta: { requiresAuth: true, role: 'admin' }
}
]
在守卫中使用：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else if (to.meta.role && userRole !== to.meta.role) {
next('/403') // 无权限页面
} else {
next()
}
})
6.2 路由懒加载
路由懒加载可以将不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，从而提高应用性能：
const routes = [
{
path: '/about',
name: 'About',
// 懒加载
component: () => import('../views/About.vue')
},
{
path: '/admin',
name: 'Admin',
// 懒加载并指定webpackChunkName
component: () => import(/* webpackChunkName: "admin" */ '../views/Admin.vue')
}
]
7. 实战技巧：404页面与路由过渡
7.1 404页面处理
const routes = [
// ...其他路由
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../views/NotFound.vue')
}
]
7.2 路由过渡效果
在App.vue中添加过渡效果：

8. 高级技巧：路由滚动行为与历史记录管理
8.1 滚动行为
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
}
})
8.2 历史记录管理
// 前进
router.go(1)

// 后退
router.go(-1)

// 替换当前历史记录
router.replace('/new-path')
9. 实战案例：构建一个完整的用户管理系统
9.1 项目结构规划
让我们通过一个完整的用户管理系统来实践所学知识。项目结构如下：
src/
├── router/
│ ├── index.js
│ └── guard.js
├── views/
│ ├── Login.vue
│ ├── Dashboard.vue
│ ├── Users/
│ │ ├── UserList.vue
│ │ ├── UserDetail.vue
│ │ └── UserEdit.vue
│ ├── Products/
│ │ ├── ProductList.vue
│ │ └── ProductDetail.vue
│ └── NotFound.vue
├── store/
│ └── auth.js
└── App.vue
9.2 完整的路由配置
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '../store/auth'

// 路由懒加载
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue'),
meta: { requiresGuest: true }
},
{
path: '/',
component: () => import('../views/Dashboard.vue'),
meta: { requiresAuth: true },
children: [
{
path: '',
name: 'Dashboard',
component: () => import('../views/DashboardHome.vue')
},
{
path: 'users',
name: 'Users',
component: () => import('../views/Users/UserList.vue'),
meta: { role: ['admin', 'manager'] }
},
{
path: 'users/:id',
name: 'UserDetail',
component: () => import('../views/Users/UserDetail.vue'),
meta: { role: ['admin', 'manager'] }
},
{
path: 'users/:id/edit',
name: 'UserEdit',
component: () => import('../views/Users/UserEdit.vue'),
meta: { role: ['admin'] }
},
{
path: 'products',
name: 'Products',
component: () => import('../views/Products/ProductList.vue')
},
{
path: 'products/:id',
name: 'ProductDetail',
component: () => import('../views/Products/ProductDetail.vue')
}
]
},
{
path: '/403',
name: 'Forbidden',
component: () => import('../views/Forbidden.vue')
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../views/NotFound.vue')
}
]

const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
}
})

// 导航守卫
router.beforeEach((to, from, next) => {
const authStore = useAuthStore()
const isAuthenticated = authStore.isAuthenticated
const userRole = authStore.userRole

// 需要登录但未登录
if (to.meta.requiresAuth && !isAuthenticated) {
next({ name: 'Login', query: { redirect: to.fullPath } })
return
}

// 已登录但访问登录页
if (to.meta.requiresGuest && isAuthenticated) {
next({ name: 'Dashboard' })
return
}

// 权限验证
if (to.meta.role && !to.meta.role.includes(userRole)) {
next({ name: 'Forbidden' })
return
}

next()
})

export default router
9.3 登录页面实现

9.4 用户列表与详情页面

9.5 用户详情页面

10. 测试与调试技巧
10.1 路由测试策略
// 测试示例：使用Vue Test Utils
import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { createApp } from 'vue'
import App from '../App.vue'
import Home from '../views/Home.vue'

describe('路由测试', () => {
let router

beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: () => import('../views/About.vue') }
]
})

const app = createApp(App)
app.use(router)
await router.push('/')
})

it('应该正确渲染Home组件', async () => {
const wrapper = mount(App, {
global: {
plugins: [router]
}
})
expect(wrapper.findComponent(Home).exists()).toBe(true)
})
})
10.2 调试技巧
使用Vue Devtools
：检查路由状态和导航历史
路由日志
：在守卫中添加console.log
错误处理
：捕获路由错误
router.onError((error) => {
console.error('路由错误:', error)
// 可以重定向到错误页面
router.push('/error')
})
11. 性能优化最佳实践
11.1 代码分割与懒加载
// 使用webpack魔法注释进行分组
const routes = [
{
path: '/admin',
component: () => import(/* webpackChunkName: "admin" */ '../views/Admin.vue')
},
{
path: '/user',
component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
}
]
11.2 预加载策略
// router/index.js
const router = createRouter({
history: createWebHistory(),
routes,
// 预加载其他路由
linkActiveClass: 'active',
linkExactActiveClass: 'exact-active'
})

// 在合适的时机预加载
router.beforeEach((to, from) => {
// 预加载可能访问的路由
if (to.name === 'Dashboard') {
import('../views/Users/UserList.vue')
import('../views/Products/ProductList.vue')
}
})
12. 常见问题与解决方案
12.1 路由参数变化但组件不重新渲染
问题
：从
/user/1
导航到
/user/2
时，组件不重新创建。
解决方案
：

12.2 动态导入失败
问题
：懒加载组件时出现404错误。
解决方案
：
const routes = [
{
path: '/about',
component: () => import('../views/About.vue').catch(error => {
// 加载失败处理
console.error('组件加载失败:', error)
return import('../views/Error.vue')
})
}
]
12.3 路由守卫死循环
问题
：在守卫中不断重定向导致死循环。
解决方案
：
router.beforeEach((to, from, next) => {
// 避免重定向到当前页面
if (to.path === from.path) {
next()
return
}

// 其他逻辑...
})
13. 与状态管理的集成
13.1 与Pinia集成
// store/auth.js
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
state: () => ({
user: null,
token: null
}),
getters: {
isAuthenticated: (state) => !!state.token,
userRole: (state) => state.user?.role
},
actions: {
async login(username, password) {
// 模拟登录
this.token = 'fake-token'
this.user = { username, role: 'admin' }
},
logout() {
this.token = null
this.user = null
}
}
})
13.2 在路由守卫中使用状态
// router/guard.js
import { useAuthStore } from '../store/auth'

export function setupAuthGuard(router) {
router.beforeEach(async (to, from, next) => {
const authStore = useAuthStore()

// 检查是否需要认证
if (to.meta.requiresAuth) {
// 如果没有token，尝试从localStorage恢复
if (!authStore.token) {
const savedToken = localStorage.getItem('token')
if (savedToken) {
authStore.setToken(savedToken)
// 验证token有效性
try {
await authStore.fetchUser()
} catch (error) {
next({ name: 'Login' })
return
}
} else {
next({ name: 'Login' })
return
}
}
}

next()
})
}
14. 移动端适配与手势导航
14.1 移动端路由优化
// router/index.js
const router = createRouter({
history: createWebHistory(),
routes,
// 移动端优化
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
// 移动端平滑滚动
return {
top: 0,
behavior: 'smooth'
}
}
}
})
14.2 手势导航支持


15. 总结
通过本教程，我们从零开始学习了Vue Router 4的核心概念和实战技巧。我们涵盖了：
基础配置
：安装、创建路由实例、基础路由定义
高级路由
：动态路由、嵌套路由、命名路由
导航控制
：编程式导航、导航守卫、路由元信息
性能优化
：懒加载、代码分割、预加载
实战案例
：完整的用户管理系统
集成与扩展
：与状态管理、移动端适配
最佳实践
：测试、调试、性能优化
Vue Router 4与Vue 3的组合为现代Web应用提供了强大而灵活的路由解决方案。掌握这些知识将帮助你构建更高效、更易维护的单页面应用。
记住，优秀的路由设计不仅关乎技术实现，更关乎用户体验。合理规划路由结构，优化导航流程，你的应用将更加出色！