构建动态路由，无需在文件到router/index.js中import
router/index.js:
{
path: '/routerPath',
component: Layout,
hidden: true,
children: [
{
path: ':fileName',
component: xxxComponent
},
{
path: ':floder/:fileName',
component: xxxComponent
},
{
path: ':project/:floder/:fileName',
component: xxxComponent
}
]
}
xxxComponent 文件：
<template>
<component :is="comp"></component>
</template>
//
<script>
export default {
name: 'xxxFile',
props: ['name'],
data() {
let project = this.$route.params.project || '',
folder = this.$route.params.folder || '',
fileName = this.$route.params.fileName || '', path = '';
if (project && folder && fileName ) {
path = project + '/' + folder + '/' + fileName;
} else if(folder && fileName) {
path = project + '/' + fileName;
} else {
path = fileName;
}
window.localStorage.setItem("path", path);
return {
compName: this.name
}
},
computed: {
comp: function () {
let path = window.localStorage.getItem("path");
try {
return require(`@/routerPath/${path}`);
}catch(err) {
return require(`@/routerPath/error/404`);
}
}
},
methods: {
// todo methods
}
}
</script>
