第三篇 Vue路由

Vue路由的基本概念

Vue路由是Vue.js官方提供的路由管理器（Vue Router），用于构建单页面应用（SPA）。它通过映射URL到组件实现页面切换，无需刷新页面。核心功能包括动态路由匹配、嵌套路由、导航守卫等。

安装与基础配置

通过npm或yarn安装Vue Router：

bash 复制代码

npm install vue-router

在项目中引入并配置路由：

javascript 复制代码

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实例中挂载路由：

javascript 复制代码

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.use(router);
app.mount('#app');

路由视图与导航

在模板中使用<router-view>作为组件渲染出口，<router-link>实现导航：

html 复制代码

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>

<router-link>默认渲染为<a>标签，可通过tag属性自定义。

动态路由匹配

通过冒号:定义动态路径参数，例如匹配用户ID：

javascript 复制代码

{ path: '/user/:id', component: User }

在组件中通过$route.params.id访问参数。若需响应参数变化，需监听$route对象或使用组件内守卫。

嵌套路由

通过children属性实现嵌套路由：

javascript 复制代码

{
  path: '/parent',
  component: Parent,
  children: [
    { path: 'child', component: Child }
  ]
}

父组件需包含<router-view>以渲染子路由。

导航守卫

路由守卫用于控制导航流程，常见类型：

全局守卫 ：router.beforeEach、router.afterEach
路由独享守卫 ：在路由配置中定义beforeEnter
组件内守卫 ：beforeRouteEnter、beforeRouteUpdate

示例：验证用户权限

javascript 复制代码

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) next('/login');
  else next();
});

路由懒加载

通过动态导入减少初始加载体积：

javascript 复制代码

const User = () => import('./views/User.vue');

结合Webpack的代码分割功能，提升性能。

路由模式

Hash模式 ：URL带#，兼容性好（默认模式）。
History模式 ：需服务器配置支持，URL更简洁。
配置方式：

javascript 复制代码

createRouter({
  history: createWebHashHistory(), // Hash模式
  // history: createWebHistory(),  // History模式
});

常见问题与优化

404页面处理：添加通配符路由捕获未匹配路径。
滚动行为 ：通过scrollBehavior自定义页面滚动位置。
路由元信息 ：使用meta字段存储路由额外数据（如页面标题）。

以上内容涵盖了Vue Router的核心用法，实际开发中可根据需求结合官方文档进一步扩展功能。