您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 500人已围观

简介 vue-router中关于children的使用方法_vue.js_

关于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') } }] } ]

首页代码如下：

点击导航栏一显示页面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