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>

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

您可能感兴趣的文章:

vue中swiper开启loop后,点击事件不响应的解决方案
这篇文章主要介绍了vue中swiper开启loop后,点击事件不响应的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue实现6位数密码效果
这篇文章主要为大家详细介绍了Vue实现6位数密码，优化iOS WebView卡顿，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-08-08
Vue实现动态样式的多种方法汇总
本文要给大家介绍Vue实现动态样式的多种方法，下面给大家带来几个案列，需要的朋友可以借鉴研究一下。
2021-06-06
在vue项目中引入高德地图及其UI组件的方法
今天小编就为大家分享一篇在vue项目中引入高德地图及其UI组件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue如何查找数组中符合条件的对象
这篇文章主要介绍了vue如何查找数组中符合条件的对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue中的@blur/@focus事件解读
这篇文章主要介绍了Vue中的@blur/@focus事件解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
详解keep-alive组件缓存
keep-alive是Vue中一个非常有用的特性,它可以帮助我们避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能,本文给大家介绍keep-alive组件缓存的相关知识,感兴趣的朋友一起看看吧
2024-01-01
Vue折叠面板组件的封装
这篇文章主要为大家详细介绍了Vue折叠面板组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue3数据更新而视图未更新问题解决
本文主要介绍了vue3 解决数据更新而视图未更新问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-10-10
Vue UI创建项目详细步骤
本文主要介绍了Vue UI创建项目详细步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01