Vue3:网页项目中路由的设计和配置

为了避免我每次建项目配路由的时候都回去翻网课,打算整一博客

路由设计

不同网页的路由设计思路基本相同,分为一级路由和二级路由,基本设计思路如下图

以我之前做过的招新系统管理端为例,可设计出如下路由

路由配置

还是以招新系统管理端为例

index.js/index.ts

在src文件夹的router文件夹中找到index.ts文件夹

将index.ts中的默认代码删除,添加如下代码

其中path是页面的地址栏路径,import则是path对应的vue文件路径

其他重要的部分代码注释都写得很详细,相信聪明的你们一下就能看懂

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL), //设置路由模式为历史模式routes: [{path:'/', //当路径匹配到'/'时,自动重定向到/login页面 -> 也就是用户一进网页,默认显示登录页redirect:'/login'},{ path: '/login', component: () => import('@/views/loginPage.vue') }, // 一级路由:登录页{ //一级路由:固定顶部及左侧导航栏path: '/layout', //当路径匹配到'/layout'时,自动重定向到'/layout/users' -> 也就是用户登录后,默认显示用户列表component: () => import('@/views/layoutContainer.vue'),redirect: '/layout/users',children: [{ //二级路由:用户列表path: '/layout/users',component: () => import('@/views/usersPage.vue')},{ //二级路由:消息推送path: '/layout/message',component: () => import('@/views/messagePage.vue')},{ //二级路由:用户端配置path: '/layout/config',component: () => import('@/views/configPage.vue')}]}]
})export default router //导出

App.vue

在App.vue中写如下代码,显示一级路由的页面

<script setup>
import { RouterView } from 'vue-router'
</script><template><router-view></router-view>
</template><style scoped></style>

layoutContainer.vue

在一级路由的layoutContainer.vue文件中,我们可以先写一个简易的导航栏切换逻辑,之后再添加样式

代码中的<RouterView></RouterView>是二级路由出口,用于显示二级路由的页面

router-view和RouterView是一样的

<script setup>
import { RouterView, RouterLink } from 'vue-router'
</script><template>导航栏<RouterLink to="/layout/users">用户列表</RouterLink><RouterLink to="/layout/message">消息推送</RouterLink><RouterLink to="/layout/config">用户端配置</RouterLink><RouterView></RouterView>
</template><style scoped></style>

打开页面,已经可以通过简单的点击操作来切换二级路由页面了(注意观察地址栏路径的变化)

RouterLink拓展知识

在浏览器中打开开发者面板,我们发现RouterLink的本质其实是a标签

而且当前被选中的导航栏有两个默认标签router-link-active router-link-exact-active

所以我们可以通过给标签设置CSS样式来改变导航栏被点击时的显示模式

示例代码如下

a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;color: #fff;
}a:hover {background-color: #3678d5;color: rgb(252, 204, 128);
}a.router-link-active {background-color: #3678d5;color: rgb(252, 204, 128);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/764211.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

递归的个人总结

递归函数&#xff08;递去、回归&#xff09;是函数不断的调用自己&#xff1b; 可以按照如下来理解&#xff1a;func1中调用func2&#xff0c;func2中调用func3; func3函数返回了&#xff0c;继续执行func2中的语句&#xff1b;func2执行完了&#xff0c;继续执行func1之后的…

ky10.aarch64安装Jenkins

参考地址&#xff1a;《安装部署 Jenkins》 前言 有war包和rpm两种安装方式&#xff0c;如果是长期使用更加推荐rpm的安装方式&#xff0c;可以更好的管理Jenkins&#xff1b; 我此次安装jenkins主要用于测试和简单的个人使用&#xff0c;所以选择更轻便的war安装。 1 下载J…

网络安全知识核心之ARP协议

概述 地址解析协议&#xff0c;即 ARP&#xff08;Address Resolution Protocol&#xff09;&#xff0c;是根据 IP 地址获取物理地址的一个TCP/IP 协议。 发送 ARP 请求的以太网数据帧 广播 到以太网上的每个主机&#xff0c;ARP 请求帧中包含了目的主机的 IP 地址。 目的主…

RK3568基于openHarmony3.2版本之GT911触摸屏调试成功

RK3568基于openHarmony3.2版本之GT911触摸屏 开发环境调试过程HDF架构配置内核配置(选择性配置)效果展示总结开发环境 ubuntu版本:20.04 openharmony版本:3.2.4-release 核心板:RK3568 触摸屏型号:GT911 博主想说句话:太太太不容易了,这源码的坑不是一般的多,在总结那…

每日一题 --- 209. 长度最小的子数组[力扣][Go]

长度最小子数组 题目&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度**。**如果不存在符合条件的子数组&#xff0c…

C++检测多显示器并把窗口显示在不同显示器上(完整源码)

初级代码游戏的专栏介绍与文章目录-CSDN博客 早先大部分应用都不考虑多显示的问题。 如果是多窗口应用&#xff0c;子窗口不会被限制在父窗口里面的&#xff0c;可以轻松把窗口拖到不同的显示器上。 但是很多流行的界面都是一个全屏主窗口&#xff0c;然后其他窗口都只能在主窗…

【docker】查看并拷贝容器内文件

一、查询容器 查询所有容器 docker ps查询名为os11的容器 docker ps | grep os11查询名为os11的容器&#xff08;包含不运行的&#xff09; docker ps -a| grep os11 docker ps [option] 显示结果介绍如下&#xff1a; 参考&#xff1a;[https://blog.51cto.com/u_15009374/31…

Linux离线部署gitLab及使用教程

一、下载gitLab的linux系统rpm包 地址&#xff1a;Index of /gitlab-ce/yum/el7/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 找到这个最新版 点击下载 二、上传到linux系统 笔者是在windows系统下的vmware虚拟机中部署安装的&#xff0c;虚拟机中安装了cent…

腾讯在GDC 2024展示GiiNEX AI游戏引擎现已投入《元梦之星》中开发使用,展示强大AIGC能力

在近日举行的GDC 2024游戏开发者大会上&#xff0c;腾讯揭开了其AI Lab团队精心打造的GiiNEX AI游戏引擎的神秘面纱。这款引擎依托先进的生成式AI和决策AI技术&#xff0c;为游戏行业带来了革命性的变革。 相关阅读&#xff1a;腾讯游戏出品&#xff01;腾讯研效AIGC&#xff…

【DataWhale学习】用免费GPU线上跑chatGLM、SD项目实践

用免费GPU线上跑chatGLM、SD项目实践 ​ DataWhale组织了一个线上白嫖GPU跑chatGLM与SD的项目活动&#xff0c;我很感兴趣就参加啦。之前就对chatGLM有所耳闻&#xff0c;是去年清华联合发布的开源大语言模型&#xff0c;可以用来打造个人知识库什么的&#xff0c;一直没有尝试…

分别使用TCP/UDP实现互相实时发送消息,接收消息功能

什么是TCP? TCP(传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层协议。它是互联网协议套件中的一部分,用于在网络上可靠地传输数据。TCP协议的主要特点包括: 面向连接:在TCP通信中,通信双方在通信之前必须先建立连接。连接建立后,数据传输完成后还需要显式…

Apache James数据库存储用户信息的密码加密问题

项目场景 Apache James邮件服务器使用数据库来存储用户信息的密码加密问题&#xff1a; 将James的用户改为数据库存储James密码是如何加密验证的 1.将James的用户改为数据库存储 1、修改存储方式 找到james-2.3.2\apps\james\SAR-INF\config.xml 找到<users-store>标…

elementUI(Vue2)和elementPlus(Vue3)图标icon差异

Vue2用法 <i class"el-icon-edit"></i><el-button type"primary" icon"el-icon-search">搜索</el-button> Vue3用法 <!-- 使用 el-icon 为 SVG 图标提供属性 --> <template><div><el-icon :siz…

Python的re模块进行正则表达式操作时的常用方法[回顾学习]

re 模块是 Python 中用于处理正则表达式的标准库模块。通过 re 模块&#xff0c;可进行字符串匹配、搜索和替换等各种操作。 有几个常用的方法&#xff1a;# re.match(pattern, string)&#xff1a;从字符串开头开始匹配模式&#xff0c;并返回匹配对象。适合用于确定字符串是否…

Doris的3种数据模型详解和数据仓库每一层的模型选用

Apache Doris是一个用于离线数据仓库开发的分布式SQL查询和分析引擎。在使用Doris进行离线数据仓库开发时,可以采用三种不同的数据模型:Duplicate模型、Aggregate模型和Unique模型。每种模型都有其适用的场景和特点,同时也对于不同层次的数据仓库有着不同的使用建议。 Dupl…

Python爬虫入门教程:从零开始学习网络数据采集(零基础入门,小白看的懂)

随着互联网的快速发展&#xff0c;数据成为了信息时代的核心。而网络爬虫&#xff08;Web Scraper&#xff09;作为一种自动化采集网络数据的工具&#xff0c;在数据获取和分析领域发挥着重要作用。Python作为一种简单易学、功能丰富的编程语言&#xff0c;被广泛用于编写网络爬…

HarmonyOS实战开发-编写一个分布式邮件系统

概述 本篇Codelab是基于TS扩展的声明式开发范式编程语言编写的一个分布式邮件系统&#xff0c;可以由一台设备拉起另一台设备&#xff0c;每次改动邮件内容&#xff0c;都会同步更新两台设备的信息。效果图如下&#xff1a; 说明&#xff1a; 本示例涉及使用系统接口&#xff…

深度学习之分层时间记忆(Hierarchical Temporal Memory,HTM)附代码解析

介绍 分层时间记忆(Hierarchical Temporal Memory,HTM)是一种基于神经科学原理的机器学习模型,用于处理时间序列数据,它模拟了大脑皮层中的一些关键特征。HTM模型由Numenta公司的研究人员Jeff Hawkins等人提出,旨在模拟大脑皮层的工作原理。 HTM模型的核心概念是将信息…

【数据结构】——排序之冒泡排序

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

视频讲解|基于非对称纳什谈判的多微网电能共享运行优化策略

1 主要内容 该讲解视频对应的程序链接为基于非对称纳什谈判的多微网电能共享运行优化策略_吴锦领&#xff0c;主要内容是对《基于非对称纳什谈判的多微网电能共享运行优化策略》的matlab复现&#xff0c;解决的是微网间基于非对称纳什谈判的P2P电能交易共享问题&#xff0c;基…