【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 路径对应的页面组件。
相关推荐
木子七1 小时前
vue2-vuex
前端·vue
小小黑0073 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
Ztiddler6 小时前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
逆旅行天涯11 小时前
【功能实现】bilibili顶部鼠标跟随效果怎么实现?
前端·javascript·vue
DDDHL_1 天前
vitepress博客模板搭建
前端·vue
说书客啊1 天前
计算机毕业设计 | SpringBoot+vue汽车资讯网站 汽车购买咨询管理系统(附源码+论文)
java·spring boot·node.js·vue·汽车·毕业设计·课程设计
刚刚好ā1 天前
uni-app跳转外部链接方式汇总--超全
前端·vue.js·uni-app·vue·webview
木子七1 天前
vue2-脚手架
前端·vue
cronaldo911 天前
研发效能DevOps: Vite 使用 Axios 实现数据双向绑定
vue.js·vue·devops
踏实探索2 天前
OpenLayers教程12_WebGL自定义着色器:实现高级渲染效果
前端·arcgis·vue·webgl·着色器