在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

随着前端技术的不断发展，单页面应用（SPA）变得越来越流行。为了更好地管理页面间的导航和状态，Vue.js 生态系统中的 Vue-Router 也不断进化。本文将介绍 Vue-Router 4.0 的新特性、使用方法以及与前代版本的对比。

一、Vue-Router 4.0 新特性

1. Composition API 支持

Vue-Router 4.0 完全支持 Vue 3 的 Composition API，这使得路由配置和逻辑更加模块化和可维护。

2. 更简洁的 API 设计

新版本的 Vue-Router 简化了 API 设计，移除了一些过时的方法和选项，使得路由配置更加直观。

3. 基于 Proxy 的路由匹配

Vue-Router 4.0 使用 Proxy 实现了更高效的路由匹配，提升了性能。

4. 新的导航守卫

引入了新的导航守卫，如 beforeEach、beforeResolve 和 afterEach，提供了更细粒度的路由控制。

5. 支持 TypeScript

Vue-Router 4.0 完全支持 TypeScript，提供了更好的类型推断和开发体验。

二、快速上手

1. 安装

首先，你需要安装 Vue-Router 4.0：

npm install vue-router@4

2. 创建路由实例

创建一个 router.js 文件，配置你的路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];const router = createRouter({
history: createWebHistory(),
routes,
});export default router;

3. 在 Vue 应用中使用路由

在你的主 Vue 文件中引入并使用路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');

三、导航守卫

1. 全局守卫

在 router.js 中配置全局守卫：

router.beforeEach((to, from, next) => {
// 导航逻辑...
next();
});

2. 组件内守卫

在组件内部使用路由守卫：

import { onBeforeRouteEnter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';export default {
// ...
setup() {
onBeforeRouteEnter((to, from, next) => {
// ...
next();
});
onBeforeRouteUpdate((to, from) => {
// ...
});
onBeforeRouteLeave((to, from, next) => {
// ...
next();
});
}
};