关于vue3-router的基础知识点以及注意事项

本周在写项目的过程中,由于新增了几个页面,所以需要在路由中配置新的路由,又因为有几个页面在不同的路由层级上,所以起的名字是相同的,因此我在添加路由的过程中就将name属性设置成为相同的,这就导致一旦我切换到该路由,就报404。经过我的各种检查,包括component的路径,单词拼写等等各种错误,确认其他没有任何错误,但是还是出错。经过我不懈的努力,最终无意间修改了其中一个name属性的名字,结果改路由就生效了。我觉得可能当时学习的时候学的比较浅,所以在空闲时间对router进行了新的了解,在此记录学习的内容。

1.路由的概念

说起路由,大家第一反应应该就是家里的路由器,那路由器的作用是什么呢?路由器是一种网络设备,负责管理和转发网络数据包的传输。而vue中的路由和这个作用类似:路由用来管理应用的页面导航,使用户可以在单页面应用中通过不同的 URL 地址访问不同的页面或组件。

何为单页面应用呢?在以前,电脑网页之间切换页面都是通过跳转不同的页面来实现的,每次跳转的都是一个新页面,直接造成的问题就是加载速度慢。而单页面应用顾名思义就是对于同一类型的页面只需要一个页面就可以实现,而路由就负责接受你点击后触发的路由导航,并且切换到相应导航的页面。

2.路由模式

主要了解的是哈希(hash)和历史(history)模式

2.1.hash模式

哈希模式特点就是可以记录每次访问的页面,可以在浏览器中实现前进和后退,缺点是url中会出现一个“#”,不美观。

2.2.history模式

history不会保留每次访问的页面,也就是不能在浏览器中实现前进和后退,url中没有“#”,但是对于需要从url中传递的参数来说,如果使用history模式直接刷新,那么就会出错。

3.路由的属性和注意事项。

路由中属性有很多,用来配置路由各种各样的功能:

3.1.path:

作用:定义访问 URL 的路径,例如/home,/login等

注意点:必须惟一!可以携带参数,例如/home/:id,/home/*等,在路由所表示的页面中可以通过下方代码接受该参数:

import { useRoute } from 'vue-router';
const route = useRoute();
const userId = route.params.id;  // 获取参数id

3.2.name:

作用:为路由命名,便于使用 name 访问路由,减少对路径的依赖。

注意点:必须惟一!!(我本次错误就是由name属性引起的)

3.3.component:

作用:指定该路由path匹配的组件

注意点:可以使用 import() 进行按需加载以优化性能。

3.4.redirect:

作用:重定向,当点击当前path时,重定向到redirect指向的页面。

注意点:可以重定向到其他任意一级路由,一般是重定向到子路由。

3.5.meta:

作用:用于设置路由的元信息,通常包含一些附加信息,比如是否需要登录、权限、页面标题等。

注意点:meta 是用户自定义字段,可以存放任意数据,结合导航守卫控制路由权限较常用。

3.6.children:

作用:用来配置当前路由的子路由,子路由和父路由都可以使用所有的路由属性。

本次内容很简单,主要的就是每个属性的注意点,过程中出现的错误还请大家指出。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【大数据学习 | kafka】kafka的数据存储结构

以上是kafka的数据的存储方式。 这些数据可以在服务器集群上对应的文件夹中查看到。 [hexuanhadoop106 __consumer_offsets-0]$ ll 总用量 8 -rw-rw-r--. 1 hexuan hexuan 10485760 10月 28 22:21 00000000000000000000.index -rw-rw-r--. 1 hexuan hexuan 0 10月 28 …

软件测试面试题——移动端

一、常用的adb命令有哪些? 命令含义adb devices展示当前电脑连接的设备,如果电脑上有多个手机,需要adb -s指定对应设备adb install xxx.apk直接安装xxx.apk到手机中,注意:必须打开手机设置里的USB安装adb install -r …

软考教材重点内容 信息安全工程师 第1章 网络信息安全概述

第 1 章 网络信息安全概述 1.1.1 网络信息安全相关概念 狭义上的网络信息安全特指网络信息系统的各组成要素符合安全属性的要求,即机密性、完整性、可用性、抗抵赖性、可控性。 广义上的网络信息安全是涉及国家安全、城市安全、经济安全、社会安全、生产安全、人身安…

Perforce《2024游戏技术现状报告》Part2:游戏引擎、版本控制、IDE及项目管理等多种开发工具的应用分析

游戏开发者一直处于创新前沿。他们的实践、工具和技术受到各行各业的广泛关注,正在改变着组织进行数字创作的方式。 近期,Perforce发布了《2024游戏技术现状报告》,通过收集来自游戏、媒体与娱乐、汽车和制造业等高增长行业的从业者、管理人…

网站架构知识之密钥认证(day020)

1.密钥认证 两个节点,通过密钥形式进行访问,不要输入密码,单向。 应用场景:部分服务使用前要求我们做密钥认证。 1.使用rsa算法创建公钥私钥 ssh-keygen -t rsa /root/.ssh/id_rsa, 私钥地址 /root/.ssh/…

《重学Java设计模式》之 工厂方法模式

《重学Java设计模式》之 建造者模式 《重学Java设计模式》之 原型模式 《重学Java设计模式》之 单例模式 模拟发奖多种商品 工程结构 奖品发放接口 package com.yys.mes.design.factory.store;public interface ICommodity {/*** Author Sherry* Date 14:20 2024/11/6**/voi…

微信小程序的汽车维修预约管理系统

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 系统功能简述 前台用于实现用户在页面上的各种操作,同时在个人中心显示各种操作所产生的记录:后…

Oh My Posh安装

nullSet up your terminalhttps://ohmyposh.dev/docs/installation/windows Git ee oh-my-posh: Windows上的oh-my-zsh,源地址 https://github.com/JanDeDobbeleer/oh-my-posh.git (gitee.com)https://gitee.com/efluent/oh-my-posh

unity 镜面 反射

URP 镜面 资源绑定 下载 namespace UnityEngine.Rendering.Universal { [ExecuteInEditMode]public class PlanarURP : MonoBehaviour{public bool VR false;public int ReflectionTexResolution 512;public float Offset 0.0f;[Range(0, 1)]public float Reflecti…

深度学习(十):伦理与社会影响的深度剖析(10/10)

深度学习:伦理与社会影响的深度剖析 一、深度学习的伦理挑战 (一)数据隐私之忧 深度学习模型的训练往往需要大量数据,而数据的收集过程可能会侵犯个人隐私。例如,据统计,面部识别技术在全球范围内每天会收…

网络安全从入门到精通(特别篇I):应急响应之APT事件处置流程

应急响应 应急响应之APT处置流程1.现场询问1.1 了解威胁事件表现1.2 了解威胁事件发现时间1.3 了解系统架构,如服务器类型、业务架构、网络拓扑等2 判断安全事件状态3 确认事件对象4 确定事件时间5 问题排查应急响应之APT处置流程 1.现场询问 1.1 了解威胁事件表现 1.C&…

美格智能5G车规级通信模组: 5G+C-V2X连接汽车通信未来十年

自2019年5G牌照发放开始,经过五年发展,我国5G在基础设施建设、用户规模、创新应用等方面均取得了显著成绩,5G网络建设也即将从基础的大范围覆盖向各产业融合的全场景应用转变。工业和信息化部数据显示,5G行业应用已融入76个国民经…

鸿蒙next打包流程

鸿蒙打包 下载团结引擎添加开源鸿蒙打包支持 团结引擎版本要和sdk版本相对应,图中最新版1.3.1团结引擎,需要sdk12,直接在模块里自动下载即可。 打包报错 在unity社区搜索到,是burst的问题,在package manager里将burst升级到1.8.18就打包成功了,不知道为啥。 团结引擎打包…

python实现RSA算法

目录 一、算法简介二、算法描述2.1 密钥产生2.2 加密过程2.3 解密过程2.4 证明解密正确性 三、相关算法3.1 欧几里得算法3.2 扩展欧几里得算法3.3 模重复平方算法3.4 Miller-Rabin 素性检测算法 四、算法实现五、演示效果 一、算法简介 RSA算法是一种非对称加密算法&#xff0c…

Android笔记(三十一):Deeplink失效问题

背景 通过deeplink启动应用之后,没关闭应用的情况下,再次使用deeplink会失效的问题,是系统bug导致的。此bug仅在某些设备(Nexus 5X)上重现,launchMode并且仅当应用程序最初通过深层链接启动并再次通过深层…

基于Multisim拔河比赛游戏+计分电路(含仿真和报告)

【全套资料.zip】拔河比赛游戏计分电路Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.拔河游戏机用9个发光二极管排成一行。 2.开机后只有中间一个点亮,以此作为拔河的中心…

A20红色革命文物征集管理系统

🙊作者简介:在校研究生,拥有计算机专业的研究生开发团队,分享技术代码帮助学生学习,独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取,记得注明来意哦~🌹 赠送计算机毕业设计600…

面向 TP 场景能力全面升级, OceanBase 4.2.5 LTS 版正式发布

去年的 OceanBase 年度发布会中,OceanBase 推出了一体化数据库的首个长期支持版——4.2.1 LTS。这一年来,已有数百位客户在真实的生产环境中对该版本进行了验证并成功上线,证明了OceanBase 在TP场景中的卓越性能。与此同时,越来越…

在线预览 Word 文档

引言 随着互联网技术的发展,Web 应用越来越复杂,用户对在线办公的需求也日益增加。在许多业务场景中,能够直接在浏览器中预览 Word 文档是一个非常实用的功能。这不仅可以提高用户体验,还能减少用户操作步骤,提升效率…

MongoDB笔记02-MongoDB基本常用命令

文章目录 一、前言二、数据库操作2.1 选择和创建数据库2.2 数据库的删除 3 集合操作3.1 集合的显式创建3.2 集合的隐式创建3.3 集合的删除 四、文档基本CRUD4.1 文档的插入4.1.1 单个文档插入4.1.2 批量插入 4.2 文档的基本查询4.2.1 查询所有4.2.2 投影查询(Projec…