【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 路径对应的路由组件。