Vue-学习小结1 :二级菜单中的路由组件未正常显示

页面展示状态:

  在一级路由组件【商品管理】下,正常应显示4个二级菜单,缺少【品牌管理】的展示

1、检查该路由下, 所有的二级路由是否添加和格式规范。暂未发现问题

export const asyncRoutes=[
  // 商品管理
  {
    path:'/product',
    component:Layout,   
    name:'Product',      // 一级路由的名字
    meta:{title:'商品管理',icon:'el-icon-goods'},
    children:[
      {
        path:'tradeMark',
        name:'TradeMark',
        component:()=>import('@/views/product/tradeMark'),
        meta:{title:'品牌管理'}
      },
      {
        path:'attr',
        name:'Attr',
        component:()=>import('@/views/product/Attr'),
        meta:{title:'平台属性管理'}
      },
      {
        path:'spu
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue的keep-alive组件可以用来缓存已经渲染过的组件,从而避免重复渲染。然而,当使用二层级路由(即嵌套的子路由)时,我们可能会遇到无法正确缓存子路由组件的问题。 在使用vue-router的嵌套路由时,如果我们想要缓存二层级的菜单组件,我们需要在父路由组件添加keep-alive组件。例如,我们有一个父路由组件为A,它包含一个<router-view>来展示子路由组件,其有一个子路由组件为B,我们想要缓存它。我们可以将keep-alive组件添加在A组件的外层,如下所示: ```html <template> <div> <keep-alive> <router-view></router-view> </keep-alive> </div> </template> ``` 这样,无论我们在A组件和B组件之间切换,B组件都会被缓存,避免了重复渲染的问题。 然而,如果我们想要缓存二层级路由的菜单组件,我们需要做一些额外的处理。我们可以在A组件使用<router-view>来展示菜单组件,并在父组件添加keep-alive组件,如下所示: ```html <template> <div> <keep-alive> <router-view name="menu"></router-view> </keep-alive> <router-view></router-view> </div> </template> ``` 这样,菜单组件会被正确地缓存,并且在A组件的其他子路由切换时保持缓存,解决了无法缓存二层级路由菜单的问题。 综上所述,使用Vue的keep-alive组件能够解决缓存二层级路由菜单的问题,我们只需要在父组件添加keep-alive组件,并在父组件的模板使用<router-view>来展示菜单组件即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值