路由概述

@Route

部署路由环境 ↓ 创建路由 ↓ 使用路由 ↓ 渲染路由

Deployment

单独安装路由依赖并引入，比较麻烦，不推荐

1. 安装路由 - 为项目添加安装依赖

npm i vue-router -S

2. 引入路由 - 在入口文件 main.js 中引入路由，作为中间件使用；这里引入后，路由将作为全局组件，其它组件可以直接使用

//引入
import router from './router'

//使用 - 链式
app.use(router).mount('#app')

创建项目的时候指定使用路由，自动生成路由配置文件

CreateRouter

使用路由功能，需要 vue-router 的支持

推荐创建项目的时候指定使用路由，自动生成路由配置文件

也可以单独安装路由依赖；需要单独配置并引入，比较麻烦，不推荐

使用 createRouter() 函数，根据路由选项 RouterOptions 创建路由实例 Router

详细情况，请参考路由思维导图

路由选项 RouterOptions
属性	说明
history	createWebHistory：大多 WEB 应用使用的模式，SEO 优化好；需要正确配置服务器 createWebHashHistory：基于 hash；SEO 优化体现一般；无须额外配置服务器
routes	路由列表；详细配置属性使用见下表
linkActiveClass linkExactActiveClass	路由匹配样式严格路由匹配样式

History

历史记录模式

Vue2 使用 mode 配置项，Vue3 使用 history 配置项

需要引入对应的包再使用

1. createWebHistory()

HTML5 模式，URL 不带 #；传统网站模式

需要服务器端配合处理路径，否则容易出现 404；后端运维基本技能

http://localhost:5173/

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    // 
})

2. createWebHashHistory()

hash 模式；推荐模式

URL 带 #，看起来不够美观

SEO 优化性能略微不足

兼容性更好，不需要服务器端配合处理路径；前后端开发比较省心

优秀作品提交，请使用哈希模式

http://localhost:5173/#/

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(import.meta.env.BASE_URL),
    // 
})

Routes - RouteRecordRaw

按照值对形式 name-value pair 配置路由，即把 URL 路径映射到组件；其中，路径 path 和组件 component 是必填项

所有的路由配置位于项目 src → router 文件夹中，通常是 index.js

更多路由配置特性，请访问路由定义和分类

建议在系统默认的路由配置文件 router → index.js 中，根据项目需求，相应的增加并修改

routes/RouteRecordRaw
属性	说明
path	路由；必填
component	对应路由的组件；必填
name	命名路由：通过名字来指定路由；不能重复；更直观、灵活，简化路由使用，如动态路由
redirect	重定向路由：让指定的路由重新定位到另外一个路由
children	嵌套路由、子路由；嵌套路由通常需要使用重定向
props	是否启用路由参数；可以接收动态路由参数和查询路由参数
meta	路由元信息：用于路由组件的额外配置；无法在编程式路由中定义或覆盖
beforeEnter	路由独享的守卫

1. 路径 path

/ 代表根路由

2. 组件 component

引入组件时，可以省略后缀名 .vue

每一个组件都是一个视图 view

每一个组件都是一个单文件组件 SFC - Single File Component

单页面应用 SPA - Single Page Application

. 默认导入 Normal import

. 系统就绪时，所有组件都已经导入

import HomeView from "@/views/HomeView.vue";
import TeamView from "@/views/TeamView.vue";

const routes = [
  { 
    path: '/', 
    component: HomeView,
    meta: {
      title: "首页",
    },  
  },
  { 
    path: '/team', 
    component: TeamView,
    meta: {
      title: "团队",
      requiresAuth: true,
    }, 
  },
]

. 动态导入 Dynamic import

. 动态导入，需要的时候才导入 - 懒加载；这里略去了路由的元数据

const routes = [
  { path: '/', component: () => import("../views/HomeView.vue") },
  { path: '/team', component: () => import("../views/TeamView.vue") },
]

3. name

4. redirect

5. children

6. props

7. meta

8. beforeEnter

[] 路由的模块化开发

除了直接配置路由 routes 外，还可以采用模块化 - 先定义再导入

方案1：普通导出 - 导入和导出需要指定名字

路由文件 routes.js：需要指定类型和名字

export const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("@/views/HomeView.vue"),
  },
  // ...
];

router → index.js：导入时，需解构化并指定名字

import { routes } from "../assets/routes";

方案2：默认导出

路由文件 routes.js：默认导出，不需要指定类型和名字

export default [
  {
    path: "/",
    name: "home",
    component: () => import("@/views/HomeView.vue"),
  },
  // ...
];

router → index.js：导入时必需指定名字

import routes from "../assets/routes";

当直接导出一个变量、函数或类时，不需要显式的 return

module.exports 是 CommonJS 模块系统的导出方式，通常用于 Node.js 环境

export 是 ES Module（ESM）的导出方式，是现代 JavaScript 标准的一部分，广泛用于浏览器和前端框架中

Vite 默认支持 ES Module（ESM），并且推荐使用 ESM 的语法（如 export 和 import）；使用 ESM 可以更好地与现代工具链集成，例如 TypeScript、Tree Shaking（摇树优化）等

linkActiveClass

请参考路由样式

linkExactActiveClass

请参考路由样式

Summary

创建路由的关键字段

history

routes

.path

.component

linkActiveClass、linkExactActiveClass