vue多层嵌套子路由不显示

主要原因在于路径配置错误,多层嵌套子路由在router中配置时,其路径为“父组件路径+子组件路径”,例如在下例中:

const routes = [{path: "/",name: "Home",component: Home,children:[{path:'schedule/',name:'Schedule',component:() => import('@/views/schedule/Schedule.vue')children:[{path:'daily',name:'Daily',component:() => import('@/views/schedule/components/Daily.vue')},{path:'weekends',name:'Weekends',component:() => import('@/views/schedule/components/Weekends.vue')}]}]}
]

组件Weekends的路由为“/schedule/weekends”,要在父组件中渲染需要配置router-link(访问链接,相当于html中的标签)及router-view(渲染子组件中的内容):

  <div><router-link to="/schedule/daily">daily</router-link></div><div><router-link to="/schedule/weekends">weekends</router-link></div><router-view></router-view>

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

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

相关文章

基于微信小程序的民宿短租酒店预订系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

【斯坦福cs324w】中译版 大模型学习笔记九 大模型之Adaptation

文章目录 引言Adaptation的必要性从llm的训练过程分析从下游任务和原始训练任务之间的差异分析 通用的Adaptation配置 当前主流的Adaptation方法ProbingFine-tuningLightweight Fine-tuningPrompt TuningPrefix TuningAdapter Tuning 参考资料 在特定领域的下游任务中&#xff…

探索前端生成二维码技术:简单实用的实现方式

引言 随着智能手机的普及&#xff0c;二维码已经成为了现代生活中不可或缺的一部分。在许多场景下&#xff0c;我们都需要将某些信息或链接以二维码的形式展示出来。本文将介绍一种简单实用的前端生成二维码的技术&#xff0c;并给出具体的代码示例。 二维码生成原理 首先&a…

HAProxy代理TCP(使用HAProxy 为TiDB-Server 做负载均衡)

目录 一、使用HAProxy 为TiDB-Server 做负载均衡环境1、创建文件夹2、配置haproxy.cfg3、创建 docker-compose.yaml 文件haproxy.cfg 配置说明[参照官方文档](https://pingcap.com/docs-cn/v3.0/reference/best-practices/haproxy/ "参照官方文档") 一、使用HAProxy …

使用Python做一个微信机器人

介绍 简介 该程序将微信的内部功能提取出来&#xff0c;然后在程序里加载Python&#xff0c;接着将这些功能导出成库函数&#xff0c;就可以在Python里使用这些函数 程序启动的时候会执行py_code目录下的main.py&#xff0c;类似于你在命令行使用python main.py。 现在会以…

vue + openlayer 按路径移动

示例 创建一个方形的规矩&#xff0c;并让点按轨迹移动。效果如下: 源代码 <template><div><div id"map" class"map"></div><button id"start-animation" ref"startButton">Start Animation</bu…

03 MIT线性代数-矩阵乘法和逆矩阵Multiplication inverse matrices

1. 矩阵乘法 Matrix multiplication 我们通过四种方法讨论如何使矩阵A与B相乘得到矩阵C。其中A为mxn&#xff08;m行n列&#xff09;矩阵&#xff0c;而B为nxp矩阵&#xff0c;则C为mxp矩阵&#xff0c;记cij为矩阵C中第i行第j列的元素 1.1 Regular way 矩阵乘法的标准计算方…

Spring SpEL 表达式语言

一、文本表达式 文本表达式支持字符串、 数字&#xff08;正数 、 实数及十六进制数&#xff09; 、 布尔类型及 null。其中的字符表达式可使用单引号来表示&#xff0c;形如&#xff1a;Deniro。如果表达式中包含单引号或者双引号字符&#xff0c;那么可以使用转义字符 \。 …

【洛谷 P1122】最大子树和 题解(深度优先搜索+树形DP)

最大子树和 题目描述 小明对数学饱有兴趣&#xff0c;并且是个勤奋好学的学生&#xff0c;总是在课后留在教室向老师请教一些问题。一天他早晨骑车去上课&#xff0c;路上见到一个老伯正在修剪花花草草&#xff0c;顿时想到了一个有关修剪花卉的问题。于是当日课后&#xff0…

ChatGPT 与 离散数学

使用ChatGPT学习离散数学是一种有效的方法&#xff0c;但请记住&#xff0c;ChatGPT只是一个文本生成模型&#xff0c;无法提供互动性的练习或答疑。下面是一些建议&#xff0c;以帮助你利用ChatGPT学习离散数学&#xff1a; 1. 明确学习目标&#xff1a;首先&#xff0c;确定…

uni-app:canvas-图形实现1

效果 代码 <template><view><!-- 创建了一个宽度为300像素&#xff0c;高度为200像素的canvas元素。canvas-id属性被设置为"firstCanvas"&#xff0c;可以用来在JavaScript中获取该canvas元素的上下文对象。 --><canvas style"width:200p…

【AI视野·今日CV 计算机视觉论文速览 第253期】Mon, 25 Sep 2023

AI视野今日CS.CV 计算机视觉论文速览 Mon, 25 Sep 2023 Totally 64 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers MosaicFusion: Diffusion Models as Data Augmenters for Large Vocabulary Instance Segmentation Authors Jiahao Xie, W…

郁金香2021年游戏辅助技术中级班(一)

郁金香2021年游戏辅助技术中级班&#xff08;一&#xff09; 用代码读取utf8名字字节数组搜索UTF-8字符串 用CE和xdbg分析对象名字从LUA函数的角度进行分析复习怪物名字偏移 用CE和xdbg分析对象数组认识虚函数表分析对象数组 分析对象数组链表部分链表的定义链表的数据在内存里…

想要精通算法和SQL的成长之路 - 最长递增子序列 II(线段树的运用)

想要精通算法和SQL的成长之路 - 最长递增子序列 II&#xff08;线段树的运用&#xff09; 前言一. 最长递增子序列 II1.1 向下递推1.2 向上递推1.3 更新操作1.4 查询操作1.5 完整代码&#xff1a; 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 最长递增子序列 II 原题链接…

智能充电桩服务系统软硬件通讯协议

该协议内容遵循modbus-rtu协议&#xff0c;如有不足&#xff0c;还请各路大神指正。 1、设备链接服务器或与服务器心跳 设备主机上电&#xff1a;设备主机自动向服务器发送 “00” 指令&#xff0c;请求注册或设备与服务器通讯心跳&#xff08;每10秒&#xff09;。 设备编号&a…

修改 Ubuntu .cache 和 pip cache 默认路径

修改 Ubuntu .cache 和 pip cache 默认路径 非常不建议修改 .cache 默认路径&#xff0c;除非你知道修改后的影响。 执行下面命令进行修改&#xff0c; vi /root/.bashrc--- 追加 export XDG_CACHE_HOME/u01/.cache export PIP_CACHE_DIR/u01/.cache ---完结&#xff01;

vue3使用pinia 实现权限code存取

文章目录 前言一、pinia 简要认识二、实现思路三、详细实现步骤1.用pinia 定义user store 用来存储用户相关的数据,安装 **js-cookie **来辅助存在cookie里2. 在登录后获取用户的userId 与 token 后&#xff0c;调用定义好的 getUserPermisson 获取用户的权限code&#xff0c;并…

OpenAI官方吴达恩《ChatGPT Prompt Engineering 提示词工程师》(2)如何迭代开发提示词

迭代/Iterative 在机器学习中&#xff0c;您经常有一个想法&#xff0c;然后实现它。编写代码&#xff0c;获取数据&#xff0c;训练模型&#xff0c;这就给您一个实验结果。然后您可以查看该输出&#xff0c;进行错误分析&#xff0c;找出哪些地方工作或不工作&#xff0c;然后…

VMware/kali使用小贴士(持续更新(吧

关于截屏 kali截屏快捷键 关于虚拟机和主机切屏 因为kali不全屏看还挺难受的&#xff0c;全屏了又很难切回主机 虚拟机全屏时&#xff0c;可以先Alt Ctrl取消对VM的控制&#xff08;光标移到上方白条也是同理&#xff09;&#xff0c;然后Alt Tab切换窗口

郁金香2021年游戏辅助技术(初级班)(上)

郁金香2021年游戏辅助技术初级班&#xff08;上&#xff09; %p、size_t、%zd、%llu、FindWindow、GetWindowText、SetWindowTextGetWindowThreadProcessId、OpenProcess、ReadProcessMemory封接读内存接口函数 int R4(void* 地址)跨进程向目标进程内存地址写入数值 WriteProce…