路由概述

@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 },
  { path: '/team', component: TeamView },
]
. 动态导入 Dynamic import
. 动态导入,需要的时候才导入 - 懒加载
const routes = [
  { path: '/', component: () => import("../views/TeamView.vue") },
  { path: '/about', component: () => import("../views/HomeView.vue") },
]
[] 路由的模块化开发
除了直接配置路由 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