首页 > 资讯 > 前端开发 > JavaScript >vue-router中关于children的使用方法

276

分享到

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

2024-04-02 19:04:59 276人浏览八月长安

摘要

目录关于children的使用children的使用场景router配置中children配置不起作用关于children的使用 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(  '../views/Page1.Vue')
      },
      children: [{
        path: '/page1Son',
        name: 'page1Son',
        component: function () {
          return import(  '../views/Page1Son.vue')
        }
      }],
    },
    {
      path: '/page2',
      name: 'page2',
      component: function () {
        return import(  '../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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue-router中关于children的使用方法

本文链接: https://www.lsjlt.com/news/165745.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

京东一面：post为什么会发送两次请求？???

2024-01-12

鼠标划过时整行变色284607详解

2023-05-20

鼠标划过时整行变色284415处理办法

2023-05-20

TypeScript接口和类型的区别小结

2023-05-20

细说JS数组遍历的一些细节及实现

2023-05-20

深入浅出JavaScript前端中的设计模式

2023-05-20

初学者如何快速搭建Express开发系统步骤详解

2023-05-20

JavaScrip简单数据类型隐式转换的实现

2023-05-20

前端Website sitemap.xml文件搜索引擎优化

2023-05-20

vue使用Swiper踩坑解决避坑

2023-05-20

热门问答

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

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

目录

关于children的使用

children的使用场景

router配置中children配置不起作用

本篇文章演示代码以及资料文档资料下载

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

关于vue文件中index.vue的使用方法

jQuery的children()方法怎么使用

vue3+TypeScript+vue-router的使用方法

关于Vue中keep-alive的作用及使用方法

关于vue中使用three.js报错的解决方法

vue中关于trigger的用法

vue中关于click.stop的用法

关于react-router中的Prompt组件使用心得

关于TransparentBlt的使用方法

SQL中关于distinct关键字的使用方法

vue中关于el-popover的使用

关于JavaScript的URL.createObjectURL()的使用方法

关于接口ApplicationContext中的getBean()方法使用

关于Java中@SuppressWarnings的正确使用方法

关于java中final关键字的使用方法详解

python中关于property的最详细使用方法

mybatis中关于in的使用方法及说明

mybatis中关于in的使用方法有哪些

关于vue父组件调用子组件的方法

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

细说JS数组遍历的一些细节及实现

深入浅出JavaScript前端中的设计模式

初学者如何快速搭建Express开发系统步骤详解

JavaScrip简单数据类型隐式转换的实现

前端Website sitemap.xml文件搜索引擎优化

vue使用Swiper踩坑解决避坑