Vue如何做一个左边栏

news2024/11/26 5:46:18

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

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

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

第四步 实现嵌套路由

 第五步 ul中嵌套着li

第六步嵌套路由

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

嵌套路由规则

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

 点击之后可以修改

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

点击之后会发生改变

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

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

 item in 数组

 别忘记了key关键字

数据都渲染好了

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

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

导航命令跳转

 路由导航

 我要接受用户的id

 要具体写id的值

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

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

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

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

this.router.………可以得出

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

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

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

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

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

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

相关文章

elementUI 实现动态表单数据校验

转载http://t.csdn.cn/XuTa2 1、探讨需求 首先我们需要探讨一下需求: 表单中的部分el-form-item 的label都是从接口拿到的,需要遍历进行动态渲染。 需要给每个el-form-item加上校验至少是必填校验 有的el-form-item不需要校验,也不是从接口…

express学习笔记1 - 框架搭建

1、创建项目 mkdir admin-node cd admin-node npm init -y 安装依赖 npm i -S express 创建 app.js const express require(express)// 创建 express 应用 const app express()// 监听 / 路径的 get 请求 app.get(/, function(req, res) {res.send(hello node) })// 使 …

GoogleLeNet Inception V2 V3

文章目录 卷积核分解第一步分解,对称分解第二步分解,非对称分解在Inception中的改造一般模型的参数节省量可能导致的问题 针对两个辅助分类起的改造特征图尺寸缩减Model Regularization via Label Smoothing——LSR问题描述,也就是LSR解决什么…

问道管理:市盈率市净率市销率三者之间的关系?

市盈率、市净率和市销率是股票剖析中最常用的三种金融目标,它们是评价股票价值和价格是否合理的重要工具。那么,三者之间到底有什么联系呢?本文将从多个视点进行剖析。 1. 基本概念 市盈率 (PE Ratio) 是一个衡量公司的股价相对于其每股收益…

安卓音视频多对多级联转发渲染

最近利用自己以前学习和用到的音视频知识和工程技能做了一个android的sdk,实现了本地流媒体ipc rtsp 拉流以及自带mip usb等camera audio节点产生的流媒体通过webrtc sfu的方式进行多对多级联发布共享,网状结构,p2p组网,支持实时渲染以及转推rtmp&#x…

Java版工程行业管理系统源码-专业的工程管理软件- 工程项目各模块及其功能点清单

 工程项目管理软件(工程项目管理系统)对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营,全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据…

【Android】APP启动优化学习笔记

启动优化目的 用户体验: 应用的启动速度直接影响用户体验。用户希望应用能够快速启动并迅速响应他们的操作。如果应用启动较慢,用户可能会感到不满,并且有可能选择卸载或切换到竞争对手的应用。通过启动优化,可以提高应用的启动…

Inobitec DICOM Viewer Pro 2.11.0 Crack

Inobitec DICOM Viewer Pro 2.11.0 专业DICOM查看器、匿名器、转换器、PACS客户端、迷你PACS服务器、患者CD/DVD刻录机(带查看器)等功能的医学影像专业必备的DICOM工作站和查看器 动态渐进版本(每季度发布)扩展功能 高级 3D 重建 以 OBJ、STL、PLY、…

uni-app:实现分页功能,单击行获取此行指定数据,更改行样式

效果&#xff1a; 分段解析代码 分页功能实现&#xff1a; 一、标签 1、搜索栏-模糊查询 <!-- 搜索框--><form action"" submit"search_wip_name"><view class"search_position"><view class"search"><…

【AGC】Publishing API调用问题汇总

【问题背景】 开发者可以通过Publishing API完成几乎所有应用的管理和发布工作&#xff0c;自己制定自动发布接口。Publishing API有很多接口&#xff0c;包括了查询应用信息、更新应用信息、上传文件、提交发布等主要接口。下面总结了一些开发者在使用Publishing API过程中容…

构建高效物理计划:从逻辑查询到算子实现

​一、前言 本文主要介绍内容一条查询语句如何实现由逻辑计划生成物理计划。查询语句要执行的操作、涉及的表信息等存放于逻辑计划的 PlanNode 中&#xff0c;物理计划的构建就是通过解析逻辑计划的 PlanNode&#xff0c;将对应的 PlanNode 转换为对应算子&#xff08;Process…

springboot整合tio-websocket方案实现简易聊天

写在最前&#xff1a; 常用的http协议是无状态的&#xff0c;且不能主动响应到客户端。最初想实现状态动态跟踪只能用轮询或者其他效率低下的方式&#xff0c;所以引入了websocket协议&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务…

富士通“Actlyzer”提供基于AI的基于视频的行为分析

想象一下这样的场景&#xff1a;一个男人走近一个家的前门&#xff0c;蹲下并检查钥匙孔。这是丢失房屋钥匙的居民还是客人&#xff1f;还是寻找入口点的窃贼&#xff1f;“Actlyzer”是一种新的人工智能安全系统&#xff0c;旨在区分这种情况。富士通实验室和研发中心的行为分…

经典文献阅读之--Online Extrinsic Calibration(激光雷达,视觉和惯导外参在线标定)

0. 简介 为了实现精确定位&#xff0c;自动驾驶车辆通常依靠围绕移动平台的多传感器感知系统。校准是一个耗时的过程&#xff0c;机械畸变会导致外部校准误差。因此&#xff0c;《Lidar-Visual-Inertial Odometry with Online Extrinsic Calibration》提出了一种激光雷达-视觉…

安卓手机怎样录屏?手机录屏小技巧分享

如果你需要在安卓手机上录制一段视频或者教程&#xff0c;录屏功能是一个非常有用的工具。在这篇文章中&#xff0c;我们将会介绍安卓手机如何录屏&#xff0c;并分享一些小技巧。 在安卓手机上录屏的方法有很多种&#xff0c;这里我们介绍两种比较常用的方法。 方法一&#x…

Nodejs 爬虫 第二章(通过掘金 userId 抓取到所有文章)!HTML to Markdown

前言 就在昨天晚上&#xff0c;做了一个通过掘金文章链接进行解析html转化为markdown文档&#xff0c;并且把图片进行下载和替换&#xff0c;但是最后也留了个伏笔&#xff08;我一定会回来的&#xff5e;&#xff09;就是通过用户id&#xff0c;把所有的文章都转化出来&#x…

安卓嵌入h5页面方法笔记

<?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"><uses-featureandroid:name"android.hardware.t…

2023年的深度学习入门指南(24) - 处理音频的大模型 OpenAI Whisper

2023年的深度学习入门指南(24) - 处理音频的大模型 OpenAI Whisper 在这一讲之前&#xff0c;我们所用的大模型都是针对文本的。这一讲我们增加一个新的领域&#xff0c;即音频。我们将介绍OpenAI的Whisper模型&#xff0c;它是一个处理音频的大模型。 Whisper模型的用法 Wh…

万界星空/推出生产制造执行MES系统/开源MES/免费下载

免费MES系统介绍 什么是MES系统呢&#xff1f;MES系统主要功能就是解决“如何生产”的问题。通过实施MES系统&#xff0c;一站式解决您所困扰的所有生产制作流程问题。 普通的免费MES系统只提供简单的基本功能让客户体验&#xff0c;而万界星空MES系统运用低代码的形式开发&a…

Python初刷题笔记

目录 保留小数的方法&#xff1a;​编辑 进制问题如何转换&#xff1a; 大小写如何转换&#xff1a; 删除空格问题&#xff1a; 循环输入的简便方法&#xff1a; 截取某一部分所需要的函数&#xff1a; 字符串处理常用函数小汇总&#xff1a; sort和sorted函数的区别&am…