企业官网建设流程全解析

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的核心用法，实际开发中可根据需求结合官方文档进一步扩展功能。