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

更新时间：2022年08月23日 10:56:59 作者：Web_阿凯

这篇文章主要介绍了vue-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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue2 的12种组件通讯
之前文章我们描述给过Vue3 的七通信使用，今天中五篇文章我们再来看看Vue2 的通信使用写法的相关资料,需要的朋友可以参考下面文章的具体内容
2021-09-09
vue使用assign巧妙重置data数据方式
这篇文章主要介绍了vue使用assign巧妙重置data数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vuex 入门教程
这篇文章主要介绍了Vuex 入门教程，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式, 那这个 vuex 怎么用呢？就具体来看一下吧
2018-01-01
详解Vue 开发模式下跨域问题
本篇文章主要介绍了Vue 开发模式下跨域问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue结合leaflet实现地图放大镜
放大镜在很多地方都可以使用的到，本文主要介绍了vue结合leaflet实现地图放大镜，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
vue-devtools 打开源码位置实现过程
这篇文章主要为大家介绍了vue-devtools 打开源码位置实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue-cli打包后本地运行dist文件中的index.html操作
这篇文章主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
前端框架Vue父子组件数据双向绑定的实现
Vue项目中经常使用到组件之间的数值传递，实现的方法很多，但是原理上基本大同小异。这篇文章将给大家介绍Vue 父子组件数据单向绑定与Vue 父子组件数据双向绑定的对比从而认识双向绑定
2021-09-09
vue中插件和组件的区别点及用法总结
在本篇文章里小编给大家分享的是一篇关于vue中插件和组件的区别点及用法总结内容，有兴趣的的朋友们可以学习下。
2021-12-12
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
这篇文章主要介绍了在Vue项目中使用jsencrypt.js对数据进行加密传输的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04