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…

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

长度最小子数组 题目&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#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;一直没有尝试…

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…

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

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

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

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

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

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

SpringBoot接口防止重复提交(AOP+Redis)

方法一&#xff1a; 若依框架的实现 【具体靠请求地址URL参数列表来判断请求是否重复】 SpingBoot接口防止重复提交_springboot接口防抖(防重复提交)的一些实现方案-CSDN博客文章浏览阅读518次。3.根据缓存键获取缓存中对象&#xff0c;如果存在&#xff0c;判断当前请求参…

利用scipy求解方程组、拟合直线、圆、椭圆、抛物线

scipy.optimize作为优化模块可以实现任意曲线拟合&#xff0c;方程求根、非线性方程组求解、自定义代价函数求解等功能&#xff0c;下面给出了optimize中常用的几个子模块&#xff1a; minimize&#xff1a;需要自己构建代价函数&#xff08;有时也称损失函数&#xff0c;目标函…

MATLAB中的数学建模:基础知识、实例与方法论

前言 在当今科技高速发展的时代&#xff0c;数学建模成为了解析复杂世界的关键工具&#xff0c;而MATLAB作为一种专业的科学计算软件&#xff0c;为我们提供了强大的数学建模平台。MATLAB不仅仅是Matrix Laboratory的简称&#xff0c;更是一个集数值分析、矩阵计算、算法开发和…

我的电脑win11系统安装了谷歌浏览器,桌面的快捷方式打不开

安装好浏览器以后双击打不开右键打开文件位置也弹窗报错提示 但是我发现开始栏里面可以打开 说明我的软件应该是没有问题的&#xff0c;研究了一下 我实际的安装目录在&#xff1a;C:\Program Files\Google\Chrome\Application 桌面的快捷方式右键查看属性显示的地址却不对&a…

什么是单点登录?

单点登录&#xff08;Single Sign On&#xff0c;简称 SSO&#xff09;简单来说就是用户只需在一处登录&#xff0c;不用在其他多系统环境下重复登录。用户的一次登录就能得到其他所有系统的信任。 为什么需要单点登录 单点登录在大型网站应用频繁&#xff0c;比如阿里旗下有淘…

JavaEE 初阶篇-深入了解进程与线程(常见的面试题:进程与线程的区别)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 进程概述 2.0 线程概述 2.1 多线程概述 3.0 常见的面试题&#xff1a;谈谈进程与线程的区别 4.0 Java 实现多线程的常见方法 4.1 实现多线程方法 - 继承 Thread 类…

理解文件操作

1. 为什么使⽤⽂件&#xff1f; 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数据进⾏持久化…

Visual Studio 插件 AnAPI++ for VS 2022

Anmial API abbreviation AnAPIis an automatically generated WebAPI project that has encapsulated Jwt Oauth2 token authentication, SqlSugar, Swagger, Nlog, Cross domain technologies, and supports Net6 and above versions Anmial API缩写AnAPI是一个自动生成的Web…