vue 三级路由必须刷新才能正常显示

Question

问题描述

vue 三级路由必须刷新才能正常显示

问题出现的环境背景及自己尝试过哪些方法

后台管理界面菜单三级子路由

相关代码

只加载到二级目录下，三级目录刷新才能正常显示

上图代码

 {
    path : '/home',
    name : 'home',
    component : Main,
    meta : {
      menu: true,
      title: '控制台'
    },
    children : [
      {
        path: 'account',
        name: 'account',
        redirect : 'childAccount',
        component: () => import ('@/views/user-center/child-account'),
        meta: {
          icon:'ios-switch',
          title: '账户管理'
        },
        children : [
          {
            path: 'childAccount',
            name: 'childAccount',
            meta: {
              icon:'ios-people',
              title: '子账号管理'
            },
            component:() => import ('@/views/user-center'),
          }
        ]
      }
   ]
 }
  

上图代码

<template>
    <div>
        <Card>用户中心</Card>
    <router-view/>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

刷新后正常显示界面

有没有前辈遇到过填平过这个坑的。。。。求救啊！

Answer 1

从你代码上看 你用的是vue-cli 但是你为什么都在router/index.js 里面写这些呢？
你这个不是导入vue.js应该写的代码嘛？

假设你现在用的vue-cli 那你的第三级组件直接可分装成一个单独的组件导入到二级组件里面哈 （二级组件是由一级导入的）
你能明白我的意思吗？ 那你这样用根本不符合vue-cli的和核心思想啊 你这怎么实现组件的复用呢？

如果你是这种实现方式的话
Vue三级路由嵌套示例
或者你 嵌套路由官方文档
你试试这样呢？

children : [
          {
            path: 'childAccount',
            name: 'childAccount',
            meta: {
              icon:'ios-people',
              title: '子账号管理'
            },
            component:() => import ('@/views/user-center'),
          },
          {path:'/', redirect: 'childAccount'}
        ]

Answer 2

确定你这个路径是对的吗

Answer 3

看你控制台报了什么错

Answer 4

{
    path : '/home',
    name : 'home',
    component : Main,
    meta : {
      menu: true,
      title: '控制台'
    },
    children : [
      {
        path: 'account',
        name: 'account',
        redirect : '/home/account/childAccount',//这里
        component: () => import ('@/views/user-center/child-account'),
        meta: {
          icon:'ios-switch',
          title: '账户管理'
        },
        children : [
          {
            path: 'childAccount',
            name: 'childAccount',
            meta: {
              icon:'ios-people',
              title: '子账号管理'
            },
            component:() => import ('@/views/user-center'),
          }
        ]
      }
   ]
 }

是不是重定向写错了，写成 redirect : '/home/account/childAccount', 试试

Answer 5

看一下你控制台