vue 路由嵌套（子路由跳转报错或者失效解决方法）

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

{
    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'),会失效。