【Vue3】路由基础

【Vue3】路由基础

背景

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

简介

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

开发环境

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

开发步骤及源码

1> 创建 Vue3 工程,参考:【Vue3】工程创建及目录说明

2> 删除 src 目录下 assetscomponents 目录。

3> 修改 src 目录下 main.ts

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

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

  • 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,作用是:
    • 全局注册 RouterLinkRouterView 组件;
    • 添加全局 $router$route 属性;
    • 启用 useRouter()useRoute() 组合式函数;
    • 触发路由器解析初始路由。
  4. 使用 Vue Router 提供的组件实现路由功能:
    • RouterLink:代替常规的 <a> 标签创建链接,使得能够在不重新加载页面的情况下改变 URL,处理 URL 的生成、编码和其他功能;
    • RouterView:渲染当前 URL 路径对应的页面组件。
相关推荐
Yaml47 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf10 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
qq_3643717216 小时前
VueRouter 导航故障问题
javascript·vue.js·前端框架·vue-router
CherishTaoTao1 天前
Vue3 keep-alive核心源码的解析
前端·vue3
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
Amd7942 天前
Nuxt.js 应用中的 prerender:routes 事件钩子详解
路由·nuxt·seo·钩子·ssg·动态·预渲染
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
用户8185216881172 天前
Vue-Router源码实现详解
vue-router
cyt涛2 天前
SpringCloudGateway — 网关路由
java·开发语言·网关·gateway·路由·断言·转发