Vue如何做一个左边栏

要求一-------点击之后能够实现页面跳转,使用router,点击之后跳到指定页面:

第二步:如何实现简易的前端路由

 第三步 左侧边栏的正确写法,ul中li套router-link

第四步 实现嵌套路由

 第五步 ul中嵌套着li

第六步嵌套路由

第七步,他在设置路由规则的时候,分了两部分,第一部分是头部,另一个主体部分

嵌套路由规则

 嵌套路由使用前先导入组件,使用组件的三个步骤

 点击之后可以修改

 我是不是应该改成子路由的嵌套规则

点击之后会发生改变

 用户管理界面怎么生成,把数据生成放在界面上

 数据每生成一次生成一个tr行

 item in 数组

 别忘记了key关键字

数据都渲染好了

 绑定一个事件,点击之后进入详情

 点了之后就能够跳,怎么跳那,用导航API

导航命令跳转

 路由导航

 我要接受用户的id

 要具体写id的值

 这里你传id是几,我传入id就是几

 这里有个注意事项,只有在路由规则里才能写:id

 在方法里是不能产生冒号的,只能产生值

点详情,点什么,后来出现了新的页面

this.router.………可以得出

给这条路由规则开启props传参

 开启之后,这条路由规则就可以用props属性接收路由的值了

接受之后,我们就可以直接使用了,不用什么router接收参数了

 动态参数项,:是能够用来路由规则里的,然后我们在做跳转的时候就是把id给传过去,做一下拼接就好了。

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

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

相关文章

Navidrome - 开源音乐服务器【打造属于自己的音乐播放器】「端口映射」随时随地想听就听

转载自cpolar极点云文章:Navidrome - 开源音乐服务器【打造属于自己的音乐播放器】「端口映射」随时随地想听就听 1. 前言 不知从何时开始,我们能用的音乐软件越来越少,笔者使用小米手机很久了,自从小米手机的自带音乐播放器变成…

MIAOYUN获评“2023年度一云多芯稳定安全运行优秀案例”

2023年7月25日至26日,由中国信息通信研究院(简称“中国信通院”)、中国通信标准化协会主办的以“云领创新,算启新篇”为主题的“2023可信云大会”在北京成功举办。会上公布了多项前瞻领域的评估结果和2023年度最佳实践案例&#x…

浅析视频技术与AI智能感知与生鲜供应链的数字化应用

一、行业背景 近年来,我国肉类、水果、蔬菜、水产品、乳品、速冻食品等生鲜市场需求快速增长,营商环境持续改善,推动冷链物流较快发展,但仍面临不少突出瓶颈和痛点难点卡点问题,难以有效满足市场需求。传统生鲜食材供…

公司植物日常护养方法备忘录

植物为我们净化空气,美化环境,我们要按照科学的经验照顾好它们。公司植物日常通用护养方法如下: 首先剪掉已经枯黄的部分。 需要晒太阳的植物按时搬到外面晒太阳,每次晒1到2个小时。 所有植物统一在每个月的20号左右施肥一次&am…

docker logs 使用说明

docker logs 可以查看某个容器内的日志情况。 前置参数说明 c_name容器名称 / 容器ID logs 获取容器的日志 , 命令如下: docker logs [options] c_name option参数: -n 查看最近多少条记录:docker logs -n 5 c_name--tail与-n 一样 &#…

如何编写一个易于维护的考试系统源码

编写一个易于维护的考试系统源码对于开发人员来说非常重要。一个易于维护的系统可以使代码更易于理解、修改和扩展,从而提高开发效率和系统稳定性。 第一步:良好的项目结构 良好的项目结构是一个易于维护的源码的基础。可以按照模块、功能或层次等方式…

C++初阶 - 6.模板初阶

目录 1.泛型编程 2.函数模板 2.1函数模板的概念 2.2函数模板格式 2.3 函数模板的原理 2.4 函数模板的实例化 2.5模板参数的匹配原则 3.类模板 3.1类模板的定义格式 3.2类模板的实例化 1.泛型编程 如何实现一个通用的交换函数呢? void Swap(int& left…

LeetCode 626. 换座位

题目链接:LeetCode 626. 换座位 题目描述 表名:Seat 编写SQL查询来交换每两个连续的学生的座位号。如果学生的数量是奇数,则最后一个学生的id不交换。 按 id 升序 返回结果表。 查询结果格式如下所示。 示例1: 题目分析 如…

java后端富文本转word,再传递到浏览器下载。

思路参考,以及所有的工具类都使用了》牧羊人大佬的代码《 有帮助的话不用给到我点赞,给大佬点赞即可 这是前端代码,必须使用get。 post后端返回的流浏览器接收不到(具体原因不详)。get无法传递requestBody,…

Json文件编辑功能

1 Json格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于 ECMAScript(European Computer Manufacturers Association, 欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。…

Java-多态

目录 1.多态的概念 2.多态的实现条件。 3.重写 4.向上转型和向下转型 5.多态的优缺点 6.避免在构造方法中调用重写方法 1.多态的概念 多态字面意思就是多种形态,具体点就是完成某个行为时,不同的对象完成时产生不同的状态。 总之,同一件…

uniapp运行项目到iOS基座

2022年9月,因收到苹果公司警告,目前开发者已无法在iOS真机设备使用未签名的标准基座,所以现在要运行到 IOS ,也需要进行签名。 Windows系统,HBuilderX 3.6.20以下版本,无法像MacOSX那样对标准基座进行签名…

JavaSE【继承和多态】(2)(向上转型、向下转型、重写、动态绑定、静态绑定、多态的运用)

一、多态 1.多态的概念 多态的概念:通俗来说,就是多种形态, 具体点就是去完成某个行为,当不同的对象去完成时会产生出不同 的状 态。 简单说就是,同一件事情,发生在不同对象身上,就会产生不同…

Mac强制停止应用

有时候使用Mac的时候,某个应用卡住了,但是肯定不能因为一个应用卡住了, 就将电脑重启吧,所以只需要单独停止该应用即可,使用快捷键optioncommandesc就会出现强制停止的界面,选择所要停止的应用,…

如何解决跨域问题?

一,什么是跨域 域(Origin)是由协议、域名和端口组成的,只有这三者完全一致的情况下,浏览器才会认为两个网址同源,否则就认为存在跨域。跨域是指在Web开发中,一个网页的JavaScript代码试图访问另…

yolov8-制作数据集,数据集格式转换(yolo格式-voc格式)附完整代码

yolo训练时可使用的数据集格式为yolo格式以及voc格式, voc格式的数据集在训练时需要先转换为yolo格式,然后根据自己的数据集的位置更改yaml配置文件的文件路径即可。基于目前对Yolo系列训练模型的讲解已经很全面,所以本文主要讲解yolo数据集与…

aws中opensearch 日志通(Centralized Logging with OpenSearch)2.0(一)

aws日志通2.0 实现全面的日志管理和分析功能 一体化日志摄取 :把aws服务器日志和应用日志传输到opensearch域中无代码日志处理 :在网页控制台中就可以实现数据处理开箱即用 :提供可视化模版(nginx、HTTP server ) 架构…

如何有效保障企业内部网络安全?好的方式是什么?

据统计,70%的数据泄露安全事故来源于企业内部。所以有效保障企业内部网络安全至关重要。但不少企业还不知道如何有效保障企业内部网络安全?也不知道有哪些好的方式?这里我们小编就跟大家来一起简单探讨一下。 什么是网络安全? 网…

【沁恒蓝牙mesh】CH58x系统时钟配置与计算

本文主要记录了【沁恒蓝牙mesh】CH58x系统时钟配置与计算 💖 作者简介:大家好,我是喜欢记录零碎知识点的小菜鸟。😎📝 个人主页:欢迎访问我的 Ethernet_Comm 博客主页🔥🎉 支持我&am…

Redis秒杀:一人一单问题及初步解决

优惠券秒杀一人一单 前言一、需求以及之前存在的问题二、增加一人一单逻辑1.初步代码2.封装一人一单逻辑3.控制锁的粒度 三、事务控制问题四、总结 前言 跟随黑马虎哥学习redis: 这是我认为b站上最好的redis教程,各方面讲解透彻,知识点覆盖…