多级路由component页面不加载

最新推荐文章于 2024-03-13 23:12:49 发布

原创最新推荐文章于 2024-03-13 23:12:49 发布 · 654 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Web_基础知识专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何在基于Vue-element-admin的项目中配置子路由，如三级医院评审标准的结构，包括`SubView.vue`的使用以及`/sj`、`/b1`和`/c1`等路径的详细设置。

项目基于vue-element-admin

新建SubView.vue

<template>
  <router-view />
</template>

<script setup>
</script>

在父层添加component

{
    path: '/sj',
    component: Layout,
    redirect: '/sj',
    name: '三级医院评审标准(2022)',
    meta: {
      title: '三级医院评审标准(2022)'
    },
    children: [
      {
        path: '/b1',
        meta: {
          title: '医疗服务能力与医院质量安全'
        },
        component: () => import('@/layout/components/SubView.vue'),//父层添加该行
        children: [
          {
            path: '/c1',
            meta: {
              title: '医疗服务能力'
            },
            component: () => import('@/layout/components/SubView.vue'),//父层添加该行
            children: [
              {
                path: '收治病种数量',
                component: () => import('@/views/116query/zip-code'),
                name: '收治病种数量',
                meta: { title: '收治病种数量', affix: true }
              },
              ...