Vue路由的基本概念
Vue路由是Vue.js官方提供的路由管理器（Vue Router），用于构建单页面应用（SPA）。它通过映射URL到组件实现页面切换，无需刷新页面。核心功能包括动态路由匹配、嵌套路由、导航守卫等。
安装与基础配置
通过npm或yarn安装Vue Router：
npm install vue-router在项目中引入并配置路由：
import { createRouter, createWebHistory } from 'vue-router'; import Home from './views/Home.vue'; import About from './views/About.vue'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] });在Vue实例中挂载路由：
import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.use(router); app.mount('#app');路由视图与导航
在模板中使用<router-view>作为组件渲染出口，<router-link>实现导航：
<router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view><router-link>默认渲染为<a>标签，可通过tag属性自定义。
动态路由匹配
通过冒号:定义动态路径参数，例如匹配用户ID：
{ path: '/user/:id', component: User }在组件中通过$route.params.id访问参数。若需响应参数变化，需监听$route对象或使用组件内守卫。
嵌套路由
通过children属性实现嵌套路由：
{ path: '/parent', component: Parent, children: [ { path: 'child', component: Child } ] }父组件需包含<router-view>以渲染子路由。
导航守卫
路由守卫用于控制导航流程，常见类型：
- 全局守卫：
router.beforeEach、router.afterEach - 路由独享守卫：在路由配置中定义
beforeEnter - 组件内守卫：
beforeRouteEnter、beforeRouteUpdate
示例：验证用户权限
router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated) next('/login'); else next(); });路由懒加载
通过动态导入减少初始加载体积：
const User = () => import('./views/User.vue');结合Webpack的代码分割功能，提升性能。
路由模式
- Hash模式：URL带
#，兼容性好（默认模式）。 - History模式：需服务器配置支持，URL更简洁。
配置方式：
createRouter({ history: createWebHashHistory(), // Hash模式 // history: createWebHistory(), // History模式 });常见问题与优化
- 404页面处理：添加通配符路由捕获未匹配路径。
- 滚动行为：通过
scrollBehavior自定义页面滚动位置。 - 路由元信息：使用
meta字段存储路由额外数据（如页面标题）。
以上内容涵盖了Vue Router的核心用法，实际开发中可根据需求结合官方文档进一步扩展功能。
