当前位置:首页 > 前端技术 > vue-router中children使用方法

vue-router中children使用方法

2022年08月06日 14:59:30前端技术4

children的使用场景:比如页面左侧显示菜单,右侧显示不同菜单下的内容,类似如下element网站,那么右侧部分的内容就是当前页面的children

 vue-router中children使用方法 _ JavaClub全栈架构师技术笔记

存在如下场景,点击导航一跳转至页面1,导航二跳转页面2,且页面1中存在子页面

 路由js如下:

const routes = [{
    path: '/',
    name: 'Home',
    component: Home,
    children: [{
      path: '/page1',
      name: 'page1',
      component: function () {
        return import( /* webpackChunkName: "about" */ '../views/Page1.vue')
      },
      children: [{
        path: '/page1Son',
        name: 'page1Son',
        component: function () {
          return import( /* webpackChunkName: "about" */ '../views/Page1Son.vue')
        }
      }],
    },
    {
      path: '/page2',
      name: 'page2',
      component: function () {
        return import( /* webpackChunkName: "about" */ '../views/Page2.vue')
      }
    }]
  }
]

首页代码如下: 

<template>
  <div class="home">
    <el-menu default-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="/page1">导航一</router-link></span>
        </template>
      </el-submenu>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title"><router-link to="/page2">导航二</router-link></span>
      </el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

vue-router中children使用方法 _ JavaClub全栈架构师技术笔记 

 点击导航栏一显示页面1下的内容

vue-router中children使用方法 _ JavaClub全栈架构师技术笔记

vue-router中children使用方法 _ JavaClub全栈架构师技术笔记

点击页面1中的显示按钮,显示页面1的子页面page1Son

vue-router中children使用方法 _ JavaClub全栈架构师技术笔记

vue-router中children使用方法 _ JavaClub全栈架构师技术笔记

点击导航栏二显示页面2

vue-router中children使用方法 _ JavaClub全栈架构师技术笔记

vue-router中children使用方法 _ JavaClub全栈架构师技术笔记

 

 

作者:Web_阿凯
来源链接:https://blog.csdn.net/weixin_45122120/article/details/109177240

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/18344.html

标签: vue
分享给朋友:

“vue-router中children使用方法” 的相关文章

【Vue】详解Vue组件系统

【Vue】详解Vue组件系统

本文提纲:1.Vue渲染的两大基础方式 2.组件的局部注册和全局注册 3. Vue中的props数据流 4.Vue的自定义事件 5. Slot的使用   Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根...

Vue的生命周期的详解

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从...

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

Document 框架采用dotnetcore+vue+elementUI 前后端分离,并且支持前端、后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表/主从表的增、删、改、查、导入、导出、上传、审核基础...

脚手架vue-cli和@vue/cli的搭建及区别

脚手架vue-cli和@vue/cli的搭建及区别

vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装...

vue项目可视化管理之(vue ui)

vue项目可视化管理之(vue ui)

@vue/cli3.0增加一个可视化项目管理工具,全局安装完成cli3.0之后,可以直接在cmd输入命令:vue ui  启动即可,地址默认是localhost:8000 可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。...

如何搭建一个vue项目

如何搭建一个vue项目

一、安装node环境   1、下载地址为:https://nodejs.org/en/   2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功      3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/...

Vue.config.productionTip的作用

Vue.config.productionTip的作用

Vue.config.productionTip的作用 productionTip 值为 true 与 为 false 时的区别 productionTip = true (默认) productionTip = fasle...

vue

vue

用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) 1...

vue3的deep穿透样式

新版的写法: &:deep(input) { text-align: right; color: #555555; } 旧版的写法 /deep/ input{ } >>> input{ }...

vue原理简介

vue原理简介

写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下。 vue.js中有两个核心功能:响应式数据绑定,组件系统。主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上给可输入元素添加了change事件,从而动态地修改model和view。...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。