Vue多级路由的实现

对Vue路由的配置不了解的看这篇文章:Vue-router 路由的基本使用-CSDN博客

一、配置children属性

注意:子路径不能带 ' / '

{

        path : "/父路径",

        component : 父组件,

        children : [{

                path : "子路径",

                component : 子组件

        }]

}

 

二、配置跳转路径 

注意:这里的完整路径是从配置路由的第一层路径开始

<router-link to="完整路径">内容</router-link>

三、命名路由 

如果我们的路由很长,那么我们在路径跳转时书写的路径也很长。

给路由命名后就相当于给路径添加了一个标签,填写路径的时候就能使用路由名称来代替。

(一)配置name属性

{

        name:"路由名称",

        name:"路由路径",

        component:组件

}

 

 

(二)使用name属性

<router-link :to="路由名称">内容</router-link>

<router-link to={ name:"路由名称" }>内容</router-link>

 

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

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

相关文章

Android中 Applicaton Context,Service context, Activity context 的区别。

Context类图 类间关系&#xff1a;https://weichao.blog.csdn.net/article/details/129969122 Context是一个抽象类&#xff0c;定义了接口&#xff0c;它的实现类是ContextImpl类。 ContextWrapper是Context的派生类&#xff0c;它实现了Context类的接口。但是ContextWrappe…

2023 electron最新最简版windows、mac打包、自动升级详解

这里我将讲解一下从0搭建一个electron最简版架子&#xff0c;以及如何实现打包自动化更新 之前我有写过两篇文章关于electron框架概述以及 常用api的使用&#xff0c;感兴趣的同学可以看看 Electron桌面应用开发 Electron桌面应用开发2 搭建electron 官方文档&#xff1a;ht…

Window下安装 Mongodb,并实现单点事务

在window操作系统下安装Mongodb&#xff0c;并让单点mongodb支持事务&#xff0c;mongodb5以上时才支持事务&#xff0c;所以必须时mongodb5及以上版本才支持。 1、下载mongodb安装文件 &#xff08;1&#xff09; 下载mongodb msi 安装文件 地址&#xff1a;mongocommunity &…

给简历镀金的超级大赛来了 学计算机的学生快冲

近日&#xff0c;由全国高等院校计算机基础教育研究会主办&#xff0c;传智教育院校邦承办的第六届“传智杯”全国IT技能大赛已正式发布。 截至目前&#xff0c;第六届“传智杯”全国大学生IT技能大赛报名人数已达 10741 人&#xff0c;覆盖全国 901 所高校&#xff0c;目前各大…

CS5523/CS5518/MIPI接口转接芯片方案/替代IT6151

CS5523MIPI转EDP信号转换芯片,可替代停产芯片IT6151, CS5518 MIPI转单/双通道 LVDS转接芯片方案。 CS5523芯片应用参考电路&#xff1a; CS5518芯片应用参考电路&#xff1a; CS5518特点&#xff1a; 内置晶振&#xff0c;无需外部晶体 可选外部时钟输入20-154MHz 支持SSC…

科技云报道:数智化升级,如何跨越数字世界与实体产业的鸿沟?

科技云报道原创。 数智化是当下商业环境下最大的确定性。 2022年&#xff0c;中国数字经济规模达50.2万亿元&#xff0c;占国内生产总值比重提升至41.5%&#xff0c;数字经济成为推动经济发展的重要引擎。从小型创业公司到跨国巨头&#xff0c;数字化转型在企业发展历程中彰显…

VSCode安装配置使用教程(最新版超详细保姆级含插件)一文就够了

前言 Visual Studio Code 是一个轻量级功能强大的源代码编辑器&#xff0c;支持语法高亮、代码自动补全&#xff08;又称 IntelliSense&#xff09;、代码重构、查看定义功能&#xff0c;并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对…

安卓 车轮视图 WheelView kotlin

安卓 车轮视图 WheelView kotlin 前言一、代码解析1.初始化2.初始化数据3.onMeasure4.onDraw5.onTouchEvent6.其他 6.ItemObject二、完整代码总结 前言 有个需求涉及到类似这个视图&#xff0c;于是在网上找了个轮子&#xff0c;自己改吧改吧用&#xff0c;拿来主义当然后&…

flink1.18.0 sql-client报错

报错 Flink SQL> select * from t1; [ERROR] Could not execute SQL statement. Reason: org.apache.flink.table.api.ValidationException: Could not find any factory for identifier kafka that implements org.apache.flink.table.factories.DynamicTableFactory in t…

STM32_project:led_beep

代码&#xff1a; 主要部分&#xff1a; #include "stm32f10x.h" // Device header #include "delay.h"// 给蜂鸣器IO口输出低电平&#xff0c;响&#xff0c;高&#xff0c;不向。 //int main (void) //{ // // 开启时钟 // RC…

如何在Linux上搭建本地Docker Registry并实现远程连接

Linux 本地 Docker Registry本地镜像仓库远程连接 文章目录 Linux 本地 Docker Registry本地镜像仓库远程连接1. 部署Docker Registry2. 本地测试推送镜像3. Linux 安装cpolar4. 配置Docker Registry公网访问地址5. 公网远程推送Docker Registry6. 固定Docker Registry公网地址…

【python算法】迪杰斯特拉算法 python实现

迪杰斯特拉算法 文章目录 迪杰斯特拉算法简介核心思想贪心算法的优缺点运行过程代码伪代码Python代码 简介 迪杰斯特拉算法的是用于图搜索的一种算法&#xff0c;其作用是图中搜索出单源最短路径。单源最短路径问题是一个给定起始点和目标点&#xff0c;在图中搜索出由起始点到…

4.Swin Transformer目标检测——训练数据集

1.centos7 安装显卡驱动、cuda、cudnn-CSDN博客 2.安装conda python库-CSDN博客 3.Cenots Swin-Transformer-Object-Detection环境配置-CSDN博客 步骤1&#xff1a;准备待训练的coco数据集 下载地址&#xff1a;https://download.csdn.net/download/malingyu/88519420 htt…

尼得科电机的强大性能,将列车门和屏蔽门的开合变得从容而安全

城市脉动&#xff0c;人流涌动。 无论城市轨道交通还是远途铁路运输&#xff0c; 尼得科电机的强大性能&#xff0c;将列车门和屏蔽门的开合变得从容而安全。 尼得科的电机方案&#xff0c;有助于列车门稳准开闭&#xff0c;保障乘客安全无忧。高效驱动&#xff0c;让乘客的行程…

Win10笔记本开热点后电脑断网的解决方法

在Win10笔记本电脑中用户可以随时打开热点&#xff0c;但是发现热点开启后电脑就会断网&#xff0c;网络不稳定就会影响到用户的正常使用。下面小编给大家介绍两种简单的解决方法&#xff0c;解决后用户在Win10笔记本电脑开热点就不会有断网的问题出现了。 具体解决方法如下&am…

基于FPGA的PCIe-Aurora 8/10音频数据协议转换系统设计阅读笔记

文章可知网下载阅读&#xff0c;该论文设计了一种 PC 到光纤模块&#xff08;基于Aurora的光纤传输&#xff09;的数据通路&#xff0c;成功完成了Aurora 以及 DDR 等模块的功能验证。 学习内容&#xff1a; 本次主要学习了Pcie高速串行总线协议、Aurora高速串行总线协议、DDR相…

在直播系统中使用RTSP协议传递视频

目录 概述 1、环境准备 2、拉流URL地址 3、导播软件取流 &#xff08;1&#xff09;OBS中拉取RTSP流 &#xff08;2&#xff09;芯象中拉取RTSP流 &#xff08;3&#xff09;vMix中拉取RTSP流 写在最后 概述 提到RTSP协议&#xff0c;很容易想到RTMP协议&#xff0c;它…

Grafana安装配置

配置文件路径 /etc/grafana/grafana.ini 一、Grafana 安装 https://grafana.com/grafana/download?editionoss&pgget&plcmtselfmanaged-box1-cta1 以centos为例 #安装 sudo yum install -y https://dl.grafana.com/oss/release/grafana-10.2.0-1.x86_64.rpm#修改端…

正点原子嵌入式linux驱动开发——Linux WIFI驱动

WIFI的使用已经很常见了&#xff0c;手机、平板、汽车等等&#xff0c;虽然可以使用有线网络&#xff0c;但是有时候很多设备存在布线困难的情况&#xff0c;此时WIFI就是一个不错的选择。正点原子STM32MP1开发板支持USB和SDIO这两种接口的WIFI&#xff0c;本章就来学习一下如何…

Maven 从入门到精通

目录 一. 前言 二. Maven 下载与安装 2.1. 下载 2.2. 安装 三. Maven 核心概念 3.1. POM 3.2. 约定的目录结构 3.3. 坐标 3.4. 依赖管理 3.4.1. 直接依赖和间接依赖 3.4.2. 依赖的排除 3.4.3. 统一的版本管理 3.4.4. 依赖范围 3.5. 仓库 3.6. 生命周期/插件/目标…