引言
Vue Router是Vue.js官方的路由管理器。它与Vue.js核心深度集成，让构建单页面应用变得易如反掌。在Vue 3中，Vue Router也进行了相应的升级，带来了新的特性和改进。本文将详细介绍Vue 3中路由的配置和使用，从基础到高级，全面覆盖Vue Router的各个方面。
1. 安装和基础设置
1.1 安装
首先，我们需要安装Vue Router：
npm install vue-router@41.2 创建路由实例
在Vue 3项目中，我们通常在src目录下创建一个router文件夹，并在其中创建index.js文件：
// 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(process.env.BASE_URL),
routes
})
export default router1.3 在Vue应用中使用路由
在main.js中引入并使用路由：
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')2. 路由配置详解
2.1 路由模式
Vue Router 4支持两种路由模式：
- Hash模式：使用URL的hash来模拟一个完整的URL。
- History模式：使用HTML5 History API来实现URL的变化。
// Hash模式
const router = createRouter({
history: createWebHashHistory(),
routes: [...]
})
// History模式
const router = createRouter({
history: createWebHistory(),
routes: [...]
})2.2 路由匹配
Vue Router支持动态路由匹配：
const routes = [
{ path: '/user/:id', component: User }
]在组件中可以通过$route.params.id访问id参数。
2.3 嵌套路由
Vue Router允许我们创建嵌套路由配置：
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]3. 编程式导航
除了使用<router-link>创建导航链接，我们还可以借助router的实例方法来实现编程式导航。
3.1 使用push方法
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由，并加上参数，让路由建立url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })3.2 使用replace方法
router.replace()和router.push()很像，唯一的不同就是，它不会向history添加新记录，而是替换掉当前的history记录。
router.replace({ path: '/home' })4. 路由守卫
路由守卫主要用来通过跳转或取消的方式守卫导航。
4.1 全局前置守卫
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})4.2 路由独享的守卫
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// 拒绝导航
return false
}
}
]4.3 组件内的守卫
const UserDetails = {
template: `...`,
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
},
beforeRouteUpdate(to, from) {
// 在当前路由改变，但是该组件被复用时调用
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
}
}5. 路由元信息
定义路由的时候可以配置meta字段：
const routes = [
{
path: '/posts',
component: PostsLayout,
children: [
{
path: 'new',
component: PostsNew,
// 只有经过身份验证的用户才能创建帖子
meta: { requiresAuth: true }
},
{
path: ':id',
component: PostsDetail
// 任何人都可以阅读文章
meta: { requiresAuth: false }
}
]
}
]然后在导航守卫中访问这个meta字段：
router.beforeEach((to, from) => {
// 而不是去检查每条路由记录
// to.matched.some(record => record.meta.requiresAuth)
if (to.meta.requiresAuth && !auth.isLoggedIn()) {
// 此路由需要授权，请检查是否已登录
// 如果没有，则重定向到登录页面
return {
path: '/login',
// 保存我们所在的位置，以便以后再来
query: { redirect: to.fullPath },
}
}
})6. 懒加载路由
当打包应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
const routes = [
{
path: '/about',
name: 'About',
// 路由级代码分割
// 这会为此路由生成一个单独的chunk (About.[hash].js)
// 当路由访问时会懒加载
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]7. 滚动行为
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。Vue Router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
const router = createRouter({
history: createWebHistory(),
routes: [...],
scrollBehavior(to, from, savedPosition) {
// 始终滚动到顶部
return { top: 0 }
}
})结语
Vue Router是Vue.js生态系统中不可或缺的一部分，它为单页应用提供了强大的路由管理功能。本文详细介绍了Vue 3中Vue Router的配置和使用，从基础设置到高级特性，希望能帮助你更好地理解和使用Vue Router。随着你的应用不断发展，你会发现Vue Router提供的这些功能会让你的开发过程更加顺畅和高效。
记住，路由不仅仅是将URL映射到组件，它还涉及到数据获取、权限控制、代码分割等多个方面。深入理解Vue Router，将帮助你构建更加复杂和强大的Vue应用。
