动态路由里,将component字符串改变为路由懒加载方法
export default {
LogisticsAuthView: 'views/logistics/logisticsAuth/index',
AddrManageView: 'views/logistics/addrManage/index',
FeeTemplateView: 'views/logistics/feeTemplate/index'
}
function loadPageByRoutes (viewPath) {
const str = constantRouterComponents[viewPath]
console.log(str)
return function (resolve) {
require([`@/${str}.vue`], resolve)
}
}
- 错误写法:(看着一样,就是报错,一定要以
@ + 路径名 + .vue
格式)
export default {
LogisticsAuthView: '@/views/logistics/logisticsAuth/index.vue',
AddrManageView: '@/views/logistics/addrManage/index.vue',
FeeTemplateView: '@/views/logistics/feeTemplate/index.vue'
}
function loadPageByRoutes (viewPath) {
const str = constantRouterComponents[viewPath]
console.log(str)
return function (resolve) {
require([`${str}`], resolve)
}
}
const routeArr = [
{
// 物流
path: '/logistics',
component: resolve => require(['@/layouts/RouteView'], resolve),
redirect: '/logistics/logistics-auth',
name: 'Logistics',
meta: { title: '物流', icon: 'transaction', keepAlive: true },
hidden: false,
children: [
{
path: '/logistics/logistics-auth',
redirect: '',
component: resolve => require(['@/views/logistics/addrManage'], resolve),
name: 'LogisticsAuth',
meta: { title: '物流授权', icon: 'transaction', keepAlive: true },
hidden: false,
children: null
},
{
path: '/logistics/addr-manage',
redirect: '',
component: resolve => require(['@/views/logistics/logisticsAuth'], resolve),
name: 'AddrManage',
meta: { title: '地址管理', icon: 'transaction', keepAlive: true },
hidden: false,
children: null
},
{
path: '/logistics/fee-template',
redirect: '',
component: resolve => require(['@/views/logistics/feeTemplate'], resolve),
name: 'FeeTemplate',
meta: { title: '运费模板', icon: 'transaction', keepAlive: true },
hidden: false,
children: null
}
]
}
]
this.$router.addRoute(...routeArr)
const routeObj = {
path: '/logistics/addr-manage',
name: 'AddrManage',
redirect: '',
meta: { title: '地址管理', icon: 'transaction', keepAlive: true },
component: resolve => require(['@/views/logistics/logisticsAuth'], resolve), // import('../test/test.vue') resolve => require(['@/views/logistics/logisticsAuth'], resolve)
hidden: false,
children: null
}
this.$router.addRoute(routeObj)