Vue Router 完全指南：从入门到实战，高效管理前端路由
前言
在现代化的前端开发中，路由管理是构建单页应用（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 || '默认标题';
})结语：
感谢阅读，期待这些见解能为你的学习或工作带来启发。若有更多疑问或需求，欢迎进一步交流与讨论。