vue-router中关于children的使用方法

Mathilda ·

更新时间:2024-11-13

· 1217 次阅读

关于children的使用

children的使用场景

router配置中children配置不起作用

关于children的使用 children的使用场景

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

存在如下场景，点击导航一跳转至页面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>

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

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

点击导航栏二显示页面2

router配置中children配置不起作用

刚开始学习前端技术，再配置路由的时候，发现路由配置中children。

import Vue from 'vue'
import Router from 'vue-router'
import menus from '@/config/menu-config'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/table',
      //name: 'table'  父组件没有页面，不选哟name
      component: {render: (e) => e("router-view")},
      children: [
        {
          path: 'table_show_view',   //不需要在前面加 ‘/'， 在导航中的index  使用 /table/table_show_view
          name: 'tableShow',
          component: () => import('@/components/table/TableView.vue'),
        },
        {
          path: 'queryTableView',   //不需要在前面加 ‘/'， 在导航中的index  使用 /table/queryTableView
          name: 'query_table_view',
          component: () => import('@/components/table/TableQueryShow.vue'),
        },
        {
          path: 'selectTableView',   //不需要在前面加 ‘/'， 在导航中的index  使用 /table/selectTableView
          name: 'selectTableView',
          component: () => import('@/components/table/SelectTableView.vue'),
        },
        {
          //默认跳转页面，当访问  /table时 跳转到  /table_show_view
          path: '/',
          name: 'fable_redirect',
          redirect: '/table/table_show_view',
        }
      ]
    },
    {
      path: '/form',
      component: {render: (e) => e("router-view")},
      children: [
        {
          path: 'form_insert_submit',
          name: 'formSubmit',
          component: () => import('@/components/form/FormView.vue'),
        },
        {
          path: 'query_form_view',
          name: 'queryFormView',
          component: () => import('@/components/form/FormView.vue'),
        },
        {
          //默认跳转页面，当访问  /table时 跳转到  /form/form_insert_submit
          path: '/',
          name: 'form_redirect',
          redirect: '/form/form_insert_submit',
        }
      ]
    },
    ,
    {
      path: '/pagination',
      component: {render: (e) => e("router-view")},
      children: [
        {
          path: 'paginationShow',
          name: 'paginationShow',
          component: () => import('@/components/pagination/Pagination.vue'),
        },
        {
          path: 'paginationTableShow',
          name: 'paginationTableShow',
          component: () => import('@/components/pagination/PaginationTableShow.vue'),
        },
        {
          //默认跳转页面，当访问  /table时 跳转到  /pagination/paginationShow
          path: '/',
          name: 'pagination_redirect',
          redirect: '/pagination/paginationShow',
        }
      ]
    }
  ]
})

导航栏的vue代码如下：NavMenu.vue

<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        router
        unique-opened
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="/table">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>表格操作学习</span>
          </template>
          <el-menu-item-group class="over-hide">
            <template slot="title">分组一</template>
            <el-menu-item class="el-icon-user" index="/table_show_view">表格展示</el-menu-item>
            <el-menu-item class="el-icon-user" index="/queryTableView">表格查询展示</el-menu-item>
            <el-menu-item class="el-icon-user" index="/selectTableView">选择框表单</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="/form">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>表单学习</span>
          </template>
          <el-menu-item-group class="over-hide">
            <template slot="title">分组一</template>
            <el-menu-item  class="el-icon-user" index="/form_insert_submit">表单输入提交</el-menu-item>
            <el-menu-item  class="el-icon-user" index="/query_form_view">表单查询修改</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item class="el-icon-user" index="/home">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="/pagination">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>分页插件</span>
          </template>
          <el-menu-item class="el-icon-user" index="/paginationShow">分页查看</el-menu-item>
          <el-menu-item class="el-icon-user" index="/paginationTableShow">分页获取表数据</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<style scoped>
.over-hide {
  overflow: hidden;
}
</style>

<script>
import menu from '@/config/menu-config'
export default {
  data() {
    return {
      menu: menu
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

发现点击之后页面没有展现指定页面的功能。

可以看得出，是没有路由展现/table_show_view 路由的信息。

经过排查发现，路由中的children的访问，必须把path路径写全才能访问到。

如上图的配置，如果需要访问/table_show_view，需要完整的访问路径即：/table/table_show_view。

最终我的菜单配置如下：

<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        router
        unique-opened
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="/table">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>表格操作学习</span>
          </template>
          <el-menu-item-group class="over-hide">
            <template slot="title">分组一</template>
            <el-menu-item class="el-icon-user" index="/table_show_view">表格展示</el-menu-item>
            <el-menu-item class="el-icon-user" index="/table/queryTableView">表格查询展示</el-menu-item>
            <el-menu-item class="el-icon-user" index="/table/selectTableView">选择框表单</el-menu-item>
          </el-menu-item-group>
          <!-- <el-submenu index="1-4">
             <template slot="title">选项4</template>
             <el-menu-item index="/index/home">选项1</el-menu-item>
           </el-submenu>-->
        </el-submenu>
        <el-submenu index="/form">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>表单学习</span>
          </template>
          <el-menu-item-group class="over-hide">
            <template slot="title">分组一</template>
            <el-menu-item  class="el-icon-user" index="/form/form_insert_submit">表单输入提交</el-menu-item>
            <el-menu-item  class="el-icon-user" index="/form/query_form_view">表单查询修改</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item class="el-icon-user" index="/index/home">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="/pagination">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>分页插件</span>
          </template>
          <el-menu-item class="el-icon-user" index="/pagination/paginationShow">分页查看</el-menu-item>
          <el-menu-item class="el-icon-user" index="/pagination/paginationTableShow">分页获取表数据</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

除此之外，再使用路由的地方需要加入： <router-view></router-view> 才能使用路由

<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <vheader/>
      </el-header>
      <el-container>
        <el-aside class="menus_style">
          <navmenu></navmenu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from '@/components/layout/NavMenu'
import Header from '@/components/layout/Header'
export default {
  name: 'app',
  components: {
    'navmenu': NavMenu,
    'vheader': Header
  }
}
</script>

<style>
.menus_style{
  width: 200px;
  height: 100%;
}
.header {
  background-color: #409EFF;
  color: #fff;
  line-height: 60px;
}
</style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。

VUE children 方法 vue-router

1024 个赞

需要登录后方可回复, 如果你还没有账号请注册新账号

Canvas高级路径操作之拖拽对象的实现

Bree 2020-02-29

669

Laravel 中使用简单的方法跟踪用户是否在线(推荐)

Serwa 2020-03-20

874

收集整理项目中常用到的正则表达式

Zahirah 2021-01-15

769

layui table单元格事件修改值的方法

Claire 2021-05-21

718

docker命令中必须加上sudo的问题解决方法

Rhoda 2023-07-22

1038

Elasticsearch/Kibana密码设置方法

Hester 2023-07-22

1081

docker查询日志并输出到文件的方法

Grace 2023-07-22

1029

docker容器/etc/hosts文件修改方法

Vanna 2023-07-22

1279

docker容器连接宿主机redis与mysql的配置方法

Peony 2023-07-22

1975

Docker镜像之不同服务器间迁移方法大全

Dorothy 2023-07-22

1993

docker容器使用内存大小限制方法

Dulcea 2023-07-22

493

在Linux中列出Systemd下所有正在运行的服务的方法指南

Zandra 2023-07-22

507

一文详解Python中多进程和进程池的使用方法

Serafina 2023-07-24

338

VMware克隆虚拟机并重新设置IP和主机名的实现方法

Kathy 2023-08-08

194

使用nginx.exe时闪退的原因和解决方法

Olivia 2023-08-08

694

Docker部署Vue项目的项目实践

Victoria 2023-08-08

307

阿里云服务IIS搭建Web网站外网无法访问的解决方法

Elina 2023-08-08

897

ssh报错nokeyalg的解决方法(关于低版本连接高版本ssh)

Jacinthe 2023-08-08

339

在没有Docker缓存的情况下构建镜像的方法分享

Viridis 2023-08-08

1779

docker-compose中启动镜像失败的几种解决方法

Hana 2023-08-08

725

我要提问

致谢

帮助他人，成就自己。

人生最大成功就是伸出热情而温暖的双手，尽自己所能去帮助身边的每一个人，只要无私的奉献，就会收获到美好的生活。

1024问感谢每一位朋友的帮助和支持。

软件开发网提供编程的基础软件技术培训教程,软件开发编程实例讲解Go,Node,HTML,CSS,Javascript,Python,Java,Ruby,C,PHP,MySQL等软件开发编程语言以及数据开发的基础知识，也提供大量的软件开发在线实例、从入门到精通就在1024问。

育儿网微养生全球行美食街育儿菜谱大全海南旅游女性养狗百科星座