Vue3全家桶 - VueRouter - 【3】嵌套路由【children】

嵌套路由【children

  • 如果在路由视图中展示的组件包含自己的路由占位符(路由出口),则此处会用到嵌套路由;
  • 如图所示:点击关于链接,则会展示About组件,在其组件中又包含了路由链接和路由占位符;
    image.png
  • 路由嵌套规则
    • 某一个路由规则中采用 children 来声明嵌套路由的规则;
    • 嵌套路由规则中的 path 不能以 / 开头,访问需要使用过 /fatherPath/sonPath 的形式;
  • 示例展示:
    • 路由模块 - router/index.js
      import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
      
      // TODO 创建路由规则数组
      const routes = [
        {
          path: '/',
          // 路由重定向
          redirect: '/guoMan'
        },
        {
          path: '/teleplay',
          name: 'teleplay',
          component: () => import('@/views/Teleplay/index.vue'),
          children: [
            {
              path: 'teleplayList',
              name: 'teleplayList',
              component: () => import('@/views/Teleplay/components/TeleplayList.vue')
            }
          ]
        },
        {
          path: '/guoMan',
          name: 'guoMan',
          component: () => import('@/views/GuoMan/index.vue'),
          children: [
            {
              path: 'guoManList',
              name: 'guoManList',
              component: () => import('@/views/GuoMan/components/GuoManList.vue')
            }
          ]
        },
        {
          path: '/riMan',
          name: 'riMan',
          component: () => import('@/views/RiMan/index.vue'),
          children: [
            {
              path: 'riManList',
              name: 'riManList',
              component: () => import('@/views/RiMan/components/RiManList.vue')
            }
          ]
        },
        {
          path: '/movie',
          name: 'movie',
          component: () => import('@/views/Movie/index.vue'),
          children: [
            {
              path: 'movieList',
              name: 'movieList',
              component: () => import('@/views/Movie/components/MovieList.vue')
            }
          ]
        }
      ]
      
      // TODO 创建路由
      const router = createRouter({
        // TODO 规定路由模式
        // history: createWebHashHistory(),
        history: createWebHistory(),
        routes
      })
      
      export default router
      
    • 文档结构展示:
      image.png
    • 只展示一个目录中的,其他目录的都一样:
      • views/GuoMan/index.vue
        <script setup>
        import { ref, reactive, computed, onMounted } from 'vue'
        
        onMounted(() => {});
        </script>
        
        <template>
          <h3>国漫</h3>
          <router-link to="/guoMan/guoManList" class="router-link">展示国漫列表</router-link>
          <hr>
          <router-view />
        </template>
        
        <style scoped>
        h3 {
          color: #fff;
          font-size: 30px;
          font-family: '隶书';
        }
        
        .router-link {
          padding: 0 10px;
          color: #fff;
          font-size: 24px;
          font-family: '隶书';
        }
        </style>
        
      • views/GuoMan/components/GuoManList.vue:
        <script setup>
        import { ref, reactive, computed, onMounted } from 'vue'
        let list = ref([
          {
            id: 'w45',
            title: '完美世界',
          },
          {
            id: 'y43',
            title: '一念永恒'
          },
          {
            id: 'z27',
            title: '赘婿'
          }
        ])
        onMounted(() => {});
        </script>
        
        <template>
          <ul>
            <li v-for="({id, title}) in list" :key="id"> {{ title }} </li>
          </ul>
        </template>
        
        <style scoped>
        li {
          list-style: none;
          padding: 0 10px;
          color: yellow;
          font-size: 24px;
          font-family: '隶书';
        }
        </style>
        
  • 运行展示:
    5876dd7e-1f55-4c98-ad73-7476eea05676.gif

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

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

相关文章

Spring Cloud Alibaba微服务从入门到进阶(一)

Springboot三板斧 1、加依赖 2、写注解 3、写配置 Spring Boot Actuator Spring Boot Actuator 是 Spring Boot 提供的一系列用于监控和管理应用程序的工具和服务。 SpringBoot导航端点 其中localhost:8080/actuator/health是健康检查端点&#xff0c;加上以下配置&#xf…

用链表实现顺序表的插入和删除操作(操作封装在函数中)

#include <iostream> using namespace std; struct node{int val;node * next; }; void print(node * head){if(headNULL ||head->nextNULL){cout<<"链表中已经无元素";return;}cout<<"打印列表:";node * phead->next;while(p){co…

安卓bp文件详解

概念 Android.bp文件是安卓构建系统&#xff08;Android Build System&#xff09;中使用的构建描述文件&#xff0c;它用于定义Android项目中的模块、库、应用等构建规则&#xff0c;该文件使用 Blueprint 语言&#xff0c;是 Soong 构建系统的一部分。 Soong则是专为Android…

vue+elementUI用户修改密码的前端验证

用户登录后修改密码&#xff0c;密码需要一定的验证规则。旧密码后端验证是否正确&#xff1b;前端验证新密码的规范性&#xff0c;新密码规范为&#xff1a;6-16位&#xff0c;至少含数字/字母/特殊字符中的两种&#xff1b;确认密码只需要验证与新密码是否一致&#xff1b; 弹…

VMware17.5.1导入x.ova格式虚拟机

1、用的是2024年2月发布的VMware17.5.1 pro、导入的是VisualBox制作的ova。 2、VMware导入ova后&#xff0c;能正常进入虚拟机&#xff0c;并正常运行。 3、注意导入过程中会提示一个选择窗口&#xff0c;务必要点击“重试”&#xff0c;不要点击取消。

【JAVA重要知识 | 第七篇】Java异常知识总结(声明、抛出、捕获异常)

7.Java异常知识总结&#xff08;声明、抛出、捕获异常&#xff09; 7.1异常定义 在程序运行过程中&#xff0c;如果JVM检测出一个不可能执行的操作时&#xff0c;就会出现运行时错误&#xff08;runtime error&#xff09;。在Java中&#xff0c;运行时错误会作为异常抛出。异…

Power Apps 学习笔记 -- Action

文章目录 1. Action 简介2. Action 配置3. 待补充 1. Action 简介 Action基础教程 : Action概述 操作Action: 1. 操作Action类似于工作流Workflow&#xff0c;提供一些重用性的操作&#xff0c;允许工作流或其他Web服务端点调用(例如javascript). 2. Action 类似于c#当中的一个…

【电路笔记】-晶体管作为开关

晶体管作为开关 文章目录 晶体管作为开关1、概述2、截止区域3、饱和区域4、示例5、晶体管开关类型及应用5.1 数字逻辑晶体管开关5.2 PNP晶体管开关5.3 达林顿晶体管开关6、总结1、概述 晶体管开关可用于通过使用处于饱和或截止状态的晶体管来打开或关闭低压直流设备(例如 LED…

基于PLC的轨检小车控制器设计

摘要&#xff1a; 本文提出了轨道检测车的总体设计方案&#xff0c;首先设计出轨检车总体结构&#xff0c;轨检车主要结构有纵梁、横梁、行走机构、导向机构、支撑架、控制计算机、电机等组成。接着对电机进行选型&#xff0c;选择合适的步进电机及与其相匹配的驱动器来给轨检…

web端功能测试

web端功能测试 web项目环境说明环境的定义环境(服务器)的组成面试题&#xff1a;你们公司有几套环境 熟悉商城项目信息来源商城项目的核心业务商城项目的核心功能模块 测试流程的应用01需求评审02计划编写03设计用例04用例执行05缺陷管理06测试报告 商城项目测试01发货业务02评…

【CV论文阅读】【计算机视觉中的Transformer应用综述】(1)

0.论文摘要 摘要——自然语言任务的Transformer model模型的惊人结果引起了视觉社区的兴趣&#xff0c;以研究它们在计算机视觉问题中的应用。在它们的显著优点中&#xff0c;与递归网络例如长短期记忆&#xff08;LSTM&#xff09;相比&#xff0c;Transformer能够模拟输入序…

基于ACM32 MCU的两轮车充电桩方案介绍,有利于打造高效安全的电池管理

随着城市化进程的加快、人们生活水平的提高和节能环保理念的普及&#xff0c;越来越多的人选择了电动车作为代步工具&#xff0c;而两轮电动车的出行半径较短&#xff0c;需要频繁充电&#xff0c;因此在城市中设置两轮车充电桩就非常有必要了。城市中的充电桩不仅能解决两轮车…

二叉搜索树迭代器

题目链接 二叉搜索树迭代器 题目描述 注意点 初始指向根节点next()指向中序遍历中的下一个节点 解答思路 先中序遍历将节点存储到队列中&#xff0c;根据队列先进先出的特点&#xff0c;在调用next()方法时&#xff0c;返回队尾对应的节点并弹出即可 代码 class BSTIter…

SQLiteC/C++接口详细介绍-sqlite3类(一)

上一篇&#xff1a;SQLiteC/C接口简介 下一篇&#xff1a;SQLiteC/C接口详细介绍&#xff08;二&#xff09; 引言&#xff1a; SQLite C/C 数据库接口是一个流行的SQLite库使用形式&#xff0c;它允许开发者在C和C代码中嵌入 SQLite 基本功能的解决方案。通过 SQLite C/C 数据…

项目案例:多标签文本分类技术在司法行业的应用与挑战

一、引言 随着法律案件数量的激增以及对案件信息快速准确处理的需求日益迫切&#xff0c;司法行业对多标签文本分类技术的应用需求日益增长。本文将介绍多标签文本分类技术在司法行业的具体应用案例&#xff0c;探讨其如何助力法律专业人士处理繁杂的案件资料&#xff0c;优化…

pycharm全局搜索时切换到了繁体和出现乱码的解决方案

看别人代码过程中免不了使用全局 搜索 按照往常 “CtrlShiftF”进行全局搜索即可 但是第一次出现了繁体字&#xff0c;后面还出现乱码的情况了&#xff01; 1.繁体字解决方案 所以在 “设置-时间和语言-输入法选项-拼音选项-按键快捷键” 中修改 1.设置 2. 时间和语言 3.输…

Spring Cloud集成nacos配置中心

1.添加Nacos Config依赖 打开nacos-config-demo的pom.xml文件并添加以下两个依赖项 项目的配置文件中通常包括数据库连接配置项、日志输出配置项、Redis连接配置项、服务注册配置项等内容&#xff0c;如spring-cloud-alibaba-nacos-config-base-demo项目中就包含数据库连接配置…

Node.js作用

Node.js可以开发应用 开发服务器应用 开发工具类应用 开发桌面端应用

电脑怎样改变ip地址?三种方法任你选

更改电脑的IP地址是一个常见的需求&#xff0c;有时候我们可能需要调整网络设置以解决连接问题或保护隐私等。那么&#xff0c;电脑怎样改变ip地址&#xff1f;以下是几种简单快捷的方法任你选。 一、通过控制面板更改IP地址 在Windows操作系统中&#xff0c;可以通过控制面板…

代码生成器之如何快速生成后端接口?

前言 在现代软件开发中&#xff0c;重复性的增删改查逻辑代码的编写往往非常耗时且容易出错。为了提高开发效率&#xff0c;减少手动维护的成本&#xff0c;代码生成器就成为了一个非常重要的工具&#xff0c;本文小编就将为大家介绍一下如何利用一个开源项目快速生成数据接口…