vue 路由嵌套(子路由跳转报错或者失效解决方法)
嵌套路由时,子路由懒加载有时会失效,最好定义引用好,再进行加载,示例结构:{path: '/shopRech',redirect:'/shopRech/shopRechHome',component:{template:'<div> <router-view></router-view></div>'},meta: { title: '积分充值'},
嵌套路由时,子路由懒加载有时会失效,最好定义引用好,再进行加载,示例结构:
{
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'),
会失效。
更多推荐
所有评论(0)