前言

        在现代化的前端开发中，路由管理是构建单页应用（SPA）的核心功能之一。Vue.js 作为主流的前端框架之一，提供了强大的官方路由库Vue Router，帮助开发者高效管理页面跳转、动态加载、权限控制等关键需求。

        无论是构建企业级后台系统，还是开发高性能的 Web 应用，灵活运用 Vue Router 都能显著提升用户体验和开发效率。本文将深入解析 Vue Router 的核心概念、最佳实践以及高级技巧，帮助开发者掌握路由管理的精髓，打造更流畅、可维护的前端应用。

步骤

1.安装

npm i vue-router@4

        使用该命名安装Vue Router

2.创建文件配置路由实例

        在src文件夹目录下创建router文件夹，在该文件夹中创建index.js，在其配置路由

// 1.导入 createRouter 和 createWebHistory 
import { createRouter, createWebHistory } from 'vue-router'// 2.定义路由
const routes = [{path: '/', // 重定向redirect: '/home'},{path: '/home',component: () => import("../components/home.vue")},{path: '/about',component: () => import("../components/about.vue")}
]// 3.创建路由实例
const router = createRouter({history: createWebHistory(), // 历史模式routes
})// 4.导出路由实例
export default router

        除了历史模式以外还有哈希模式，它们的区别如下：

哈希模式（Hash Mode）：

        哈希模式利用URL中的#符号来模拟路由。例如，http://example.com/#/about。浏览器不会将#号后面的内容发送到服务器，因此路由变化不会触发页面刷新。

• 无需服务器配置即可直接使用，适合静态部署。
• 兼容性较好，支持老旧浏览器。
• URL 中带有 #，美观性稍差。

历史模式（History Mode）:

        历史模式利用HTML5的history.pushState API实现无刷新路由切换，例如，http://example.com/about。URL更简洁，但需要服务器支持。

• 需要服务器配置，确保所有路径返回 index.html，避免 404 错误。
• URL更美观，无#符号
• 兼容性稍差，不支持IE9及以下版本。

选择建议

• 需要快速部署或静态托管时，选择哈希模式。
• 追求美观且能配置服务器时，选择历史模式。

3.全局引用

        将配置好的路由实例引入到main.js中，代码如下：

import router from './router'const app = createApp(App)app.use(router)

 4.配置路由视图和导航

        在App.vue或根组件中，添加<router-view>作为路由组件的渲染出口，并使用<router-link>实现导航跳转，示例代码如下：

<template><div class="app"><!-- 导航链接 --><router-link to="/home">home</router-link><router-link to="/about">about</router-link><!-- 路由组件渲染位置 --><router-view></router-view></div> 
</template>

5.动态路由与参数传递

        通过冒号 : 定义动态路由参数，例如用户详情页面：

{path:'/user/:id',component: () => import("../components/User.vue")}

        在需要进行跳转时通过router.push进行跳转：

<script setup>
import { ref } from 'vue';
import router from './router';const id = ref(22)
function handleUserPage() {router.push(`/user/${id.value}`)
}
</script>

        在组件中通过useRoute获取参数：

<script setup>
import { useRoute } from 'vue-router';const route = useRoute();
console.log(route.params.id);
</script>

6.路由守卫配置

        比如说我们进入一些页面时需要先登录，为防止在用户没有登录的情况下通过url进入首页，因此就需要去配置全局前置守卫beforeEach

    {path: '/user/:id',name: 'user',component: () => import("../components/User.vue")}// 配置路由守卫
router.beforeEach((to, from, next) => {if (to.name === 'user') {  // 通过name匹配const id = to.params.id;if (id === '123') {next();} else {next('/home');}} else {next();}
})

        就比如说这个例子，当我们需要进入user组件时，需要去判断它的id是不是为123，如果是则放行，不是则跳转到home组件。

        但在实际项目中，这里一般是对登录功能进行操作的，当用户登录时我们会将token保存起来，这里就去判断是否有token，如果有则放行进入首页，没有则无法进入首页。

7.路由元信息

        为路由添加自定义数据：

    {path: '/home',component: () => import("../components/home.vue"),meta:{requiresAuth:true, title:'首页'}},

        通过导航守卫修改页面标题：

router.afterEach((to, from) => {document.title = to.meta.title || '默认标题';
})

结语：

        感谢阅读，期待这些见解能为你的学习或工作带来启发。若有更多疑问或需求，欢迎进一步交流与讨论。