(已解决)Vue routes的 children使用(小白来看,包会!)

前言

分析链接:Vue+element ui实现好看的个人中心_vue个人信息页面代码-CSDN博客

使用了很多vue深层知识,简化并且做到自己的项目上面

对小白很有帮助,因为我就是小白,才搞明白。


最核心的就是routes的 children使用,所以先做一个例子再套用进去。

目录

前言

参考

1.项目结构

2.routes代码

3.IndextwoView代码

4.Page1View代码

5.pageSon代码

6.Page2View代码

routes解析:

1.简单常用段

2.重定向设置:

3.children的使用

3.1.导入

3.2.children的设置

页面逻辑解析

页面逻辑展示



参考

注:因为我是在自己项目做的测试,所以其他页面大家不需要也没关系,按逻辑去就行。

1.项目结构

2.routes代码

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import IndextwoView from "@/views/IndextwoView.vue"const routes = [{path: '/IndextwoView',name: 'IndextwoView',component: IndextwoView,children: [{path: '/Page1View',name: 'Page1View',component: function () {return import( /* webpackChunkName: "about" */ '@/views/Page1View.vue')},children: [{path: '/pageSon',name: 'pageSon',component: function () {return import( /* webpackChunkName: "about" */ '@/views/PageSon.vue')}}],},{path: '/Page2View',name: 'Page2View',component: function () {return import( /* webpackChunkName: "about" */ '@/views/Page2View.vue')}}]},{//测试页面path: '/test',name: 'test',component: () => import('../views/tlias/v-forTest.vue'),},{//登录页面path: '/login',name: 'login',component: () => import('../views/tlias/LoginView.vue'),},{// 主页页面path: '/index',name: 'index',component: () => import('../views/tlias/IndexView.vue'),meta: { token: null } },{// 后端页面path: '/stu',name: 'stu',component: () => import('../views/tlias/StuView.vue')},{// 后端页面path: '/emp',name: 'emp',component: () => import('../views/tlias/EmpView.vue')},{// 后端页面path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')},{path: '/',redirect: '/login'}
]
const router = new VueRouter({routes
})export default router

3.IndextwoView代码

<template><div class="home"><el-menudefault-active="2"class="el-menu-vertical-demo"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title"><router-link to="/Page1View">导航一</router-link></span></template></el-submenu><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title"><router-link to="/Page2View">导航二</router-link></span></el-menu-item></el-menu><router-view></router-view></div>
</template>

4.Page1View代码

<template><div class="pageone">page1<router-link to="/pageSon">显示</router-link><router-view></router-view></div>
</template>

5.pageSon代码

<template><div class="page1-son">page1-son</div>
</template>

6.Page2View代码

<template><div class="page2">page2</div>
</template>

routes解析:

1.简单常用段

下面的代码为基础路由就带有的功能带了几个页面逻辑很简单易懂,所以不解释。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)const routes = [{//测试页面path: '/test',name: 'test',component: () => import('../views/tlias/v-forTest.vue'),},{//登录页面path: '/login',name: 'login',component: () => import('../views/tlias/LoginView.vue'),},{// 主页页面path: '/index',name: 'index',component: () => import('../views/tlias/IndexView.vue'),meta: { token: null } },{// 后端页面path: '/stu',name: 'stu',component: () => import('../views/tlias/StuView.vue')},{// 后端页面path: '/emp',name: 'emp',component: () => import('../views/tlias/EmpView.vue')},{// 后端页面path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')},]
const router = new VueRouter({routes
})export default router

2.重定向设置:

由于路由中默认的为访问/路径,所以我们需要使用关键字redirect设置重定向,使他访问/路径时,访问到/login路径

{path: '/',redirect: '/login'}

3.children的使用

3.1.导入


在使用时需要导入主界面

import IndextwoView from "@/views/IndextwoView.vue"

3.2.children的设置

最上层的为导入的主页面的路径以及设置

后面就可以设置内部的子路由:

注:子路由中的: component: function () {
        return import( /* webpackChunkName: "about" */ '@/views/Page1View.vue')
      },为过时写法,可以转换成 component: () => import('../views/tlias/LoginView.vue'),
也是可以使用的,没有区别

 {path: '/IndextwoView',name: 'IndextwoView',component: IndextwoView,children: [{path: '/Page1View',name: 'Page1View',component: function () {return import( /* webpackChunkName: "about" */ '@/views/Page1View.vue')},children: [{path: '/pageSon',name: 'pageSon',component: function () {return import( /* webpackChunkName: "about" */ '@/views/PageSon.vue')}}],},{path: '/Page2View',name: 'Page2View',component: function () {return import( /* webpackChunkName: "about" */ '@/views/Page2View.vue')}}]},

页面逻辑解析

在主页面中使用

<router-link to="/Page2View">

进行路由跳转

然后使用

 <router-view></router-view>

进行页面渲染

以便于children的生效


页面逻辑展示

1.首先是我自己的页面登录(因为重定向为login)

2.进入后点击个人中心(接下来到例子内容

3.点击导航一(成功显示内容)

4.点击显示(成功显示page1-son)

5.点击导航二(成功清除原来组件,并显示page2)


套用原个人中心代码

更新中...

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

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

相关文章

leetCode 的第一题 javascript 两数之和

有人相爱&#xff0c;有人夜里开车看海&#xff0c;有人leetcode第一题都做不出来。 1.题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对…

C++入门(上)

文章目录 1:什么是C2.C的发展史3:C关键字(C98)4:命名空间4.1:命名空间的概念4.2:命名空间的定义4.3:命名空间的使用4.3.1加命名空间的名称以及域作用限定符4.3.2:使用using将命名空间中某个成员引入4.3.3:使用using namespace 命名空间名称展开命名空间代码1代码2 5:C输入与输出…

pytorch常用激活函数笔记

1. relu函数&#xff1a; 公式&#xff1a; 深层网络内部激活函数常用这个 import matplotlib.pyplot as pltdef relu_fun(x):if x>0:return xelse:return 0x np.random.randn(10) y np.arange(10)plt.plot(y,x)for i ,t in enumerate(x):x[i] relu_fun(t) plt.p…

JVM的主要组成部分,以及它们的作用。JVM中的内存区域有哪些,它们各自的作用是什么?什么是Java的堆内存,它如何影响程序的性能?

JVM的主要组成部分&#xff0c;以及它们的作用 JVM&#xff08;Java虚拟机&#xff09;的主要组成部分包括类加载器&#xff08;Class Loader&#xff09;、运行时数据区&#xff08;Runtime Data Area&#xff09;、执行引擎&#xff08;Execution Engine&#xff09;、本地库…

C#系列-C#实现秒杀功能(14)

在C#中实现商品秒杀功能&#xff0c;通常需要考虑并发控制、数据库事务、缓存策略、限流措施等多个方面。下面是一个简单的示例&#xff0c;演示了如何使用C#和数据库来实现一个基本的商品秒杀功能。 首先&#xff0c;假设你有一个商品表&#xff08;Product&#xff09;和一个…

《21天精通IPv4 to IPv6》第3天:IPv6地址配置——如何为不同的系统配置IPv6?

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

2024 年 6 款最佳 PDF 编辑器,您可以免费获得

PDF 作为与 Windows、iOS、Linux 和各种其他操作系统兼容的安全文档格式而享有盛誉。这种广泛的兼容性使 PDF 成为一种流行的选择&#xff0c;几乎每个用户都会在不同的环境中遇到 PDF 文件。无论是合同、发票、电子书、信用卡对账单、银行对账单、税务表格还是保险文件&#x…

算法学习——LeetCode力扣字符串篇

算法学习——LeetCode力扣字符串篇 344. 反转字符串 344. 反转字符串 - 力扣&#xff08;LeetCode&#xff09; 描述 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地…

精读《js 模块化发展》

1 引言 如今&#xff0c;Javascript 模块化规范非常方便、自然&#xff0c;但这个新规范仅执行了 2 年&#xff0c;就在 4 年前&#xff0c;js 的模块化还停留在运行时支持&#xff0c;10 年前&#xff0c;通过后端模版定义、注释定义模块依赖。对经历过来的人来说&#xff0c;…

再说开源软件

开源软件推动技术创新 开源软件的相关话题&#xff0c;我曾经进行过原创文章的讨论&#xff0c;想了解的&#xff0c;可以参考我的文章&#xff1a; 【AI】一文读懂大模型套壳——神仙打架&#xff1f;软饭硬吃&#xff1f;-CSDN博客 【AI】马斯克说大模型要开源&#xff0c…

二叉树和堆(优先队列)

前言&#xff1a; 本章会讲解二叉树及其一些相关练习题&#xff0c;和堆是什么。 二叉树&#xff1a; 二叉树的一些概念&#xff1a; 一棵二叉树是有限节点的集合&#xff0c;该集合可能为空。二叉树的特点是每一个节点最多有两个子树&#xff0c;即二叉树不存在度大于2的节点…

Java语言体系

一、体系理论 作为一个程序员终身学习是其必备的技能&#xff0c;我认为回顾能够更好的去让自己理解知识&#xff0c;将这些碎片化的知识练习起来。 最近由于不断进行知识学习与整理&#xff0c;越发觉得作为任意一个知识体系&#xff0c;只要能够建立对这个知识的自我理解的知…

酷开科技荣获“消费者服务之星”称号后的未来展望

恭喜酷开科技荣获2023年第四季度黑猫平台“消费者服务之星”称号&#xff01;这是对酷开科技长期以来坚持用户至上、用心服务的肯定和认可。作为OTT行业的佼佼者&#xff0c;酷开科技一直秉承着“以用户为中心”的服务理念&#xff0c;不断追求卓越品质&#xff0c;为用户提供更…

模型 PMF(产品市场契合度)

系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。产品与市场高度契合。 1 PMF(Product Market Fit)产品市场契合度 的应用 1.1 PMF在创业过程中的应用-Vincy公司的产品PartnerShare 实现PMF需要企业深入了解目标市场的需求和用户的反馈&…

leetcode154 寻找旋转排序数组中的最小值 II

文章目录 1. 解法2. 原题 [154. 寻找旋转排序数组中的最小值 II](https://leetcode.cn/problems/find-minimum-in-rotated-sorted-array-ii/) 1. 解法 class Solution {public int findMin(int[] nums) {int left 0;int right nums.length - 1;while(left < right){int m…

C++入门学习(二十七)跳转语句—continue语句

当在循环中遇到continue语句时&#xff0c;它会跳过当前迭代剩余的代码块&#xff0c;并立即开始下一次迭代。这意味着continue语句用于跳过循环中特定的执行步骤&#xff0c;而不是完全终止循环。 直接看一下下面的代码更清晰&#xff1a; 与上一节的break语句可以做一下对比…

Learn LaTeX 015 - LaTex Typeset 抄录

https://www.douyin.com/user/self?modal_id7306721102380764453&showTabpost GitHub address: https://github.com/yasenstar/learn_latex Gitee address: https://gitee.com/yasenstar/learn_latex

单片机精进之路-3流水灯

P1代表单片机的P1口的8个io的寄存器&#xff0c;使用_crol_函数&#xff1a;将 k进行1位左位移&#xff0c;并将值以unsigned char类型返回&#xff0c;再将K的值赋给P1&#xff0c;这样就点亮了P1口对应的IO为低电平的led灯。 //flow light and beep #include <reg51.h>…

亚信安慧AntDB零故障割接方案的实践

亚信安慧AntDB秉持着为客户提供最佳数据库解决方案的理念&#xff0c;不断探索并创新&#xff0c;最近取得了重大的突破。他们成功地研发出一种先进的数据库割接方案&#xff0c;实现了不停服、零故障的数据库割接操作&#xff0c;有效地将替换所带来的业务影响降至最低。 这一…

【计算机网络】互联网中的路由选择和算法

4.5 提供 数据报服务的网络层 给定源和目的地址之间的不同分组可能采用不同路径 而提供 虚电路服务的网络层 则所有分组采用统一路径 默认路由器 第一跳路由器 是主机所相连的第一路由器源路由器是源主机的默认路由器目的路由器是目的主机的默认路由器路由选择算法的广义分类:…