Vue Router是Vue.js框架的官方路由管理器，它负责处理Vue应用的页面导航、URL管理和UI切换。Vue Router 4版本带来了许多新特性和优化，旨在提高应用的性能和用户体验。相较于旧版本，Vue Router 4更加简洁高效，同时提供了更多优化选项。
要开始新的Vue.js项目并配置Vue Router 4，首先需要确保你的项目已经使用Vue CLI进行了初始化。如果你尚未创建项目，可以从Vue官网下载Vue CLI并在终端创建新项目。一旦项目创建完毕并运行，你可以在项目目录中通过运行以下命令安装Vue Router：
```bash
npm install vue-router
```
接下来，在src目录下的main.js文件中引入并配置Vue Router。例如：
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
// 路由级别的代码分割
// 这会为该路由生成一个单独的块（about.[hash].js），在访问该路由时按需加载。
component: () => import(/ webpackChunkName: "about" / '../views/About.vue'),
},
];
const router = new VueRouter({
routes,
});
new Vue({
router,
}).$mount('app');
```
现在让我们理解一下Vue Router的基础概念：
路由基础：在Vue Router中定义路由非常简单，只需在main.js中设置路由规则即可。上述代码示例定义了两个基本路由：Home和About。当用户访问/时，应用会显示Home组件；当访问/about时，则显示About组件。
动态路由：动态路由允许你在路径中包含变量，这些变量在导航时会被解析并关联到相应的组件。例如，你可以创建一个显示特定用户详情的路由：
```javascript
const routes = [
// ...其他路由配置
{
path: '/user/:id', // :id是动态参数
name: 'User',
component: UserComponent,
props: true, // 将动态参数传递给UserComponent组件
},
];
```
在组件内部，你可以通过访问`this.$route.params.id`来获取动态参数的值：
```javascript
export default {
created() {
console.log('User ID:', this.$route.params.id); // 在组件创建时打印用户ID
},
};
全局导航守卫：掌控全局动向
在Vue Router 4中，全局导航守卫是掌控全局动向的得力助手。它在所有组件之前执行，可广泛应用于各个路由。想象一下，你正在把守着一个个关口，根据用户的身份和权限，决定他们是否能进入某个页面。
代码示例：
```javascript
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!this.$store.getters.isLoggedIn) {
// 若用户未登录，如同守门人一般将其重定向到登录页面
next({ path: '/login' });
} else {
// 若用户已登录，则顺利放行，让其进入目标页面
next();
}
} else {
// 对于无需权限控制的页面，无需阻拦，直接放行
next();
}
});
```
组件内的导航守卫：精细化控制
除了全局导航守卫，组件还可以直接使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 这三种导航守卫，进行更为精细化的控制。
代码示例（以 beforeRouteEnter 为例）：
```javascript
export default {
beforeRouteEnter(to, from, next) {
// 这是路由被激活前执行的钩子，如同在关卡前设置障碍
next(vm => {
// 在这里可以执行一些初始化操作，确保页面载入前的准备动作得以完成
});
}
}
```
路由优化与实践：懒加载
懒加载是 Vue Router 的一个重要优化手段。它允许你按需加载组件，从而减少应用的启动时间与内存消耗。通过这种方式，你可以确保只有真正需要的组件才会被加载，从而提高应用的性能和用户体验。
代码示例：
```javascript
const routes = [
//...
{
path: '/lazy',
name: 'Lazy',
component: () => import(/ webpackChunkName: "lazy" / '../views/Lazy.vue') // 使用懒加载加载组件
}
];
```
路由重定向：路径的巧妙转换
当你想将某些路径的访问引导到其他路径时，路由重定向功能就派上用场了。你可以使用 redirect 和 redirects 属性来实现这一功能。这对于处理404错误或引导用户到更合适的页面非常有用。
代码示例：
```javascript
const routes = [
//...
{
path: '/redirect',
redirect: '/new-location' // 将路径重定向到新的位置
},
{
path: '/redirect/:catchAll(.)', // 捕获所有未匹配到的路径进行重定向处理
redirect: '/404' // 重定向到404页面或其他处理页面
}
];
```这个指南涵盖了Vue Router 4的基本使用、动态路由、导航守卫和路由优化等方面的内容。通过这些功能，你可以打造高效、易用且安全的 Vue.js 应用，为用户提供流畅的浏览体验。 |
