vue-router中children怎么使用

    关于children使用

    children的使用场景

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

    vue-router中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>

    vue-router中children怎么使用

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

    vue-router中children怎么使用

    vue-router中children怎么使用

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

    vue-router中children怎么使用

    vue-router中children怎么使用

    点击导航栏二显示页面2

    vue-router中children怎么使用

    vue-router中children怎么使用

    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>

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

    vue-router中children怎么使用

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

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

    vue-router中children怎么使用

    如上图的配置,如果需要访问/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-router中children怎么使用”的内容了,经过本文的学习后,相信大家对vue-router中children怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

    文章标题:vue-router中children怎么使用,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/21623

    (0)
    打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
    亿速云的头像亿速云认证作者
    上一篇 2022年8月30日 下午11:25
    下一篇 2022年8月30日 下午11:26

    相关推荐

    • cad文件的后缀有哪些

      cad文件的后缀:1、“.Dwg”,Dwg格式是cad文件的标准文件格式;2、“.dxf”,dxf格式是一种绘图交换文件,是进行CAD数据交换的CAD数据文件格式;3、“.dws”,dws格式的cad文档只能查看不能修改;4、“.dwt”,dwt是CAD的模板文件。 本教程操作环境:windows1…

      2022年9月8日
      1.4K00
    • Apache Commons Collections反序列化漏洞的示例分析

      一、简介 虽然网上已经有很多文章对这个组件的反序列化漏洞进行分析,但在这里还是记录一下。毕竟,这对Java反序列化漏洞的发展意义重大。 Apache Commons Collections是Java应用开发中一个非常常用的工具库,它添加了许多强大的数据结构,简化了Java应用程序的开发,已经成为Ja…

      2022年9月8日
      67600
    • word字体放大如何居中

      word字体放大居中的方法 1、首先打开word,选中你要放大居中的文字, 点击开始菜单栏的字号,这里选择的最大字号是72号。 2、这时可以直接在字号框里输入数字,数字越大字越大。 3、选择菜单栏“布局”–“纸张方向”–“横向”,来调整页面方向。 4、在菜单栏点击“布局”–…

      2022年9月15日
      1.1K00
    • jquery如何改变input的value属性

      在jquery中,可以利用val()方法来改变input的value属性;val()方法用于返回或者设置被选元素的value属性,value属性用于规定input元素的值,语法为“$(input元素对象).val(input修改后的value属性值);”。 本文操作环境:windows10系统、jq…

      2022年9月10日
      1.0K00
    • laravel是否内置了vue

      laravel没有内置vue;laravel是使用PHP语言编写的网页程序开发框架,而vue是一个用于创建用户界面的开源JavaScript框架,可以在laravel中部署vue,但是laravel中并不存在内置vue。 本文操作环境:Windows10系统、Laravel9版、Dell G3电脑。…

      2022年9月1日
      49300
    • Apple修复iOS和iPadOS中的代码执行漏洞有哪些

      Apple公司本周修复了影响其iOS和iPadOS移动操作系统的多个严重代码执行漏洞。 该IT巨头发布iOS 14.3版本和iPadOS 14.3版本,修复了11个安全漏洞,包括代码执行漏洞。 攻击者可借助恶意字体文件利用其中最严重的漏洞在Apple iPhone和iPad上执行恶意代码。该厂商修复…

      2022年9月10日
      37300
    • mysql默认编码怎么看

      mysql中的默认编码是latin1(ISO_8859_1),可以使用“SHOW VARIABLES LIKE ‘character%’;”命令来进行查看。latin1编码是单字节编码,向下兼容ASCII,但不支持中文,可以通过在配置文件“my.ini”中查找并设置“defa…

      2022年9月19日
      75400
    • SolarWinds供应链APT攻击事件安全风险的示例分析

      背景 12月13日,美国拔尖安全公司FireEye(中文名:火眼)发布报告称,其发现一起全球性入侵活动,命名该组织为UNC2452。该APT组织通过入侵SolarWinds公司,在SolarWinds Orion商业软件更新包中植入恶意代码,进行分发,FireEye称之为SUNBURST恶意软件。该…

      2022年9月8日
      44900
    • vue组件值变化但不刷新问题怎么解决

      今天分享文章“vue组件值变化但不刷新问题怎么解决”,主要从:组件值变化但不刷新强制组件刷新、bug复现、解决等几个方面为大家介绍,希望能帮到您。 组件值变化但不刷新强制组件刷新 在调用组件的时候,如果数据中只是某个属性变化(比如id)变化,在vue开发工具中看到变量值变化,但是组件上的数据就是不刷…

      2022年6月29日
      1.9K00
    • mysql的安装路径如何查看

      查看方法:1、鼠标右击“计算机”图标,在打开的菜单中点击“管理”;2、依次点击“服务和应用程序”-“服务”;3、在右侧服务列表中,找到mysql服务;4、选中mysql服务,点击鼠标右键,在打开的菜单中选择“属性”;5、在“mysql属性”弹窗中,查看“可执行文件路径”选项的值即可,该选项的值就是M…

      2022年9月24日
      1.5K00
    站长微信
    站长微信
    电话联系

    400-800-1024

    工作日9:30-21:00在线

    分享本页
    返回顶部