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