Vue 路由基础：Vue 2 和 Vue 3 的比较与使用
Vue.js 是一款非常流行的前端框架，而 Vue Router 是 Vue.js 的官方路由管理库。在前端开发中，路由是处理页面跳转和视图管理的关键部分。Vue 2 和 Vue 3 都使用 Vue Router 来管理路由，但是随着 Vue 3 的发布，Vue Router 也有了不少变化。在本文中，我们将详细介绍 Vue 2 和 Vue 3 中的路由使用，比较它们之间的不同，并提供一些示例代码。
一、安装 Vue Router
在 Vue 项目中使用 Vue Router，首先需要安装它：
Vue 2 中安装 Vue Router
npm install vue-router@3Vue 3 中安装 Vue Router
npm install vue-router@4二、基本的路由配置
1. Vue 2 中的路由配置
在 Vue 2 中，路由配置通常是在 src/router/index.js 文件中进行的。基本的路由配置如下：
// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import About from '@/components/About';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
});
2. Vue 3 中的路由配置
Vue 3 中，Vue Router 进行了部分 API 更改。以下是 Vue 3 中的路由配置示例：
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/components/Home';
import About from '@/components/About';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
三、路由守卫
路由守卫允许我们在路由跳转前、跳转后进行操作。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫。
1. 全局守卫
全局守卫在 Vue 2 和 Vue 3 中的写法相似，都是通过 beforeEach 和 afterEach 方法来设置。
// Vue 2 示例
router.beforeEach((to, from, next) => {
console.log('导航开始');
next();
});
// Vue 3 示例
router.beforeEach((to, from, next) => {
console.log('导航开始');
next();
});
2. 路由独享守卫
路由独享守卫用于单个路由配置内，写法如下：
// Vue 2 示例
const routes = [
{
path: '/about',
name: 'About',
component: About,
beforeEnter: (to, from, next) => {
console.log('路由独享守卫');
next();
}
}
];
// Vue 3 示例
const routes = [
{
path: '/about',
name: 'About',
component: About,
beforeEnter: (to, from, next) => {
console.log('路由独享守卫');
next();
}
}
];
3. 组件内守卫
在组件内使用守卫来控制访问权限。具体的守卫包括 beforeRouteEnter、beforeRouteLeave 和 beforeRouteUpdate。
// Vue 2 示例
export default {
beforeRouteEnter(to, from, next) {
console.log('进入路由');
next();
},
beforeRouteLeave(to, from, next) {
console.log('离开路由');
next();
}
};
// Vue 3 示例
export default {
beforeRouteEnter(to, from, next) {
console.log('进入路由');
next();
},
beforeRouteLeave(to, from, next) {
console.log('离开路由');
next();
}
};
四、动态路由
动态路由可以通过路由参数传递动态信息。在 Vue 2 和 Vue 3 中的写法基本相同。
1. 配置动态路由
// Vue 2 示例
const routes = [ { path: '/user/:id', name: 'User', component: User } ];// Vue 3 示例
const routes = [ { path: '/user/:id', name: 'User', component: User } ];2. 获取动态路由参数
通过 $route.params 可以访问路由参数：
// Vue 2 和 Vue 3 示例
export default { created() { console.log(this.$route.params.id); // 获取动态路由参数 } };五、嵌套路由
嵌套路由是指在一个父组件中嵌套显示子组件的路由。Vue 2 和 Vue 3 的嵌套路由配置方式相似，主要区别在于 Vue 3 使用了 createRouter。
1. 配置嵌套路由
// Vue 2 示例
const routes = [ { path: '/parent', component: Parent, children: [ { path: 'child', component: Child } ] } ];// Vue 3 示例
const routes = [ { path: '/parent', component: Parent, children: [ { path: 'child', component: Child } ] } ];2. 在父组件中使用 <router-view>
<!-- Vue 2 和 Vue 3 示例 -->
<template>
<div> <router-view></router-view> <!-- 渲染子路由 --> </div>
</template>六、路由懒加载
为了提高应用的性能，Vue Router 支持路由懒加载。当路由被访问时，才加载对应的组件。
1. Vue 2 中的懒加载
const Home = () => import('@/components/Home');
const About = () => import('@/components/About');2. Vue 3 中的懒加载
const Home = () => import('@/components/Home');
const About = () => import('@/components/About');七、路由跳转
Vue Router 提供了两种方式来进行路由跳转：通过编程式导航和声明式导航。
1. 编程式导航
// Vue 2 和 Vue 3 示例
this.$router.push('/about');2. 声明式导航
<!-- Vue 2 和 Vue 3 示例 -->
<router-link to="/about">Go to About</router-link>总结
Vue 2 和 Vue 3 中的路由大部分功能相似，但 Vue 3 使用了新的 API，例如 createRouter 和 createWebHistory，并且 Vue 3 中的路由配置更加简洁和灵活。掌握 Vue Router 的基本用法和进阶技巧，能帮助我们构建更加流畅和高效的单页面应用。
希望这篇博客对你有所帮助，欢迎在评论区分享你的想法或提出问题！