嵌套路由时,子路由懒加载有时会失效,最好定义引用好,再进行加载,示例结构:

{
    path: '/shopRech',
    redirect:'/shopRech/shopRechHome',
    component:{
      template:'<div> <router-view></router-view></div>'
    },
    meta: { title: '积分充值'},
    children:[
      {
        path: 'shopRechHome',
        name:'shopRechHome',
        component:home ,
        meta: { title: '积分充值'}
      },
      {
        path: 'rechargeInfo',
        name:'rechargeInfo',
        component:shopRechHome,
        meta: { title: '积分充值'}
      },
    ]
  },

如果是直接跳转,不是父页面>加载<router-view></router-view>,那么结构如上面例子所示。如果写入报错 You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.那么在你的项目配置项,以vue.cli3为例,在vue.config.js里面写入runtimeCompiler: true配置
如果 component:{template:'<div> <router-view></router-view></div>'},不起作用尝试 component: { render(c) {return c('router-view') }},在这里插入图片描述注意:子路由path不要写 “/” 。写入 / 会跳不到或者报错。子路由component引入,先定义再引入,懒加载component: () => import('@/views/commodityManagement/goodsRule/index.vue'),会失效。

Logo

前往低代码交流专区

更多推荐