【Vue3】路由基础

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中路由的基本写法。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assets 和 components 目录。

3> 修改 src 目录下 main.ts。

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

4> 创建三个页面组件，注意与功能组件不同，不放在 src/components 目录下，页面组件一般放在 pages 或 views 目录下。

• Dashboard.vue

  <template><div class="dashboard">这是仪表盘页面</div>
  </template><script setup lang="ts">
  </script><style scoped lang="scss">
  </style>
  

• System.vue

  <template><div class="system">这是系统管理页面</div>
  </template><script setup lang="ts">
  </script><style scoped lang="scss">
  </style>
  

• About.vue

  <template><div class="about">这是关于页面</div>
  </template><script setup lang="ts">
  </script><style scoped lang="scss">
  </style>
  

5> 执行 npm i vue-router 命令安装路由组件。

6> 在 src 下创建 router 目录，并在其中创建 index.ts 文件，此文件作用是创建并暴露路由器。

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '@/pages/Dashboard.vue'
import System from '@/pages/System.vue'
import About from '@/pages/About.vue'const router = createRouter({// 路由器工作模式history: createWebHistory(),routes: [{path: '/dashboard',component: Dashboard},{path: '/system',component: System},{path: '/about',component: About}]
})export default router

7> 修改 main.ts 引入并使用路由器。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')

8> 修改根组件 App.vue，调用路由器实现跳转功能。

<template><h1 class="title">Vue3路由</h1><hr><div class="route"><div class="menu"><div class="menu-item"><RouterLink to="/dashboard" active-class="active">仪表盘</RouterLink></div><div class="menu-item"><RouterLink to="/system" active-class="active">系统管理</RouterLink></div><div class="menu-item"><RouterLink to="/about" active-class="active">关于</RouterLink></div></div><div class="content"><RouterView /></div></div>
</template><script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script><style scoped lang="scss">
.title {text-align: center;
}
.route {display: flex;justify-content: center;.menu {width: 200px;height: 500px;background-color: #F1F2F3;border-radius: 6px;.menu-item {height: 40px;line-height: 40px;text-align: center;margin: 5px;border-radius: 3px;text-decoration: none;}.menu-item:hover {background-color: white;cursor: pointer}a {text-decoration: none;}.active {color: #00AEEC;}}.content {width: 600px;height: 500px;margin-left: 10px;border: 1px solid #F1F2F3;}
}
</style>

9> 执行命令 npm run dev 启动应用，浏览器访问：http://localhost:5173/，点击左侧菜单观察页面变化。

总结

关键步骤：

1. 安装路由组件：npm i vue-router；
2. 创建并暴露路由器：src/router/index.ts，包括：
   • 引入 createRouter 用于创建路由器；
   • 通过 createRouter 参数对象的 history 属性配置路由器工作模式，路由器工作模式有两类：createWebHistory() 和 createWebHashHistory()，本文使用的是 createWebHistory()，两类工作模式间的差异将在其他文章中说明；
   • 通过 createRouter 参数对象的 routes 属性配置路由，每个路由由一个路径 path 和一个组件 component 构成；
   • 暴露路由 export default router。
3. 引入路由器：src/main.ts，作用是：
   • 全局注册 RouterLink 和 RouterView 组件；
   • 添加全局 $router 和 $route 属性；
   • 启用 useRouter() 和 useRoute() 组合式函数；
   • 触发路由器解析初始路由。
4. 使用 Vue Router 提供的组件实现路由功能：
   • RouterLink：代替常规的 <a> 标签创建链接，使得能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能；
   • RouterView：渲染当前 URL 路径对应的页面组件。