在之前vue中使用自动注册 svg 图标 (文章在这里 Vue使用svt-sprite-loader自动引入svg图标) 的时候我发现了 require.context()
方法, 我觉得, 可以用这个方法来自动添加路由, 就开始了踩坑之路.
.ts
.这个是我自己定义的参数名, 并非官方复制 大家能理解就行
require.context(path, recursive, fileType)
参数:
path: 要处理那个路径下的文件
recursive: 是否递归子文件夹下文件
fileType: 文件类型
const files = require.context('./', true, /\.vue$/)
files.forEach(key => {
files(key).default // 这里可以看到组件的内容哦.
})
在 views
文件夹下面新建 pages.js
.
pages.js
const files: any = require.context('./', true, /\.vue$/)
const pages: any = {
}
files.keys().forEach((key: any) => {
// 使用正则来取文件名称, 作为路由的 path;
/* 由于我使用了ts, vue文件模板写法也有差别, 在这里如果要获取 vue 页面里面的数据什么的需要改变写法, 所以我放弃了在vue页面中添加变量配置的方法. */
const str = key.match(/[\w]+\./)![0].replace('.', '')
pages[str] = key
})
export default pages
/* 处理后
文件名: '文件路径'
{
About: "./About.vue",
Background: "./Background/Background.vue"
}
*/
在 src/route
下新建 route.js
文件:
在这里我用了两种方法, 是因为第一次使用的方法出现了问题 (打包之后页面空白, 就是路由引入问题)
, 做了修改
一定要使用字符串拼接的方式来引入.
一定要使用字符串拼接的方式来引入.
一定要使用字符串拼接的方式来引入.
重要的事情说三遍 原因请看这篇文章出现的问题:
Vue 动态引入图片报错
// 引入刚才处理过的数据
import pages from '@/views/pages'
// 用来存放路由数据
const routes: any = []
/* 使用这种方法 */
for (const key in pages) {
routes.push({
path: `/${
key}`,
// 注意: 我在这里把路径处理了一下.
/*
pages 里面的路径是相对路径, 和当前文件不是同级, 引入会出问题, 所以我使用了绝对路径来引入.
处理方法:
源数据: './Background/Background.vue'
删除相对路径 './'
引入的时候使用 import(<绝对路径> + <文件夹/文件名>)
*/
component: () => import('@/views/' + pages[key].replace('./', '')),
})
}
export default routes
这个是打包之后会出现错误的代码: 错误的
错误的
错误的
代码 看一下就好
Object.keys(pages).forEach((key: string) => {
if (pages[key] && pages[key].name) {
routes.push({
path: `/${
pages[key].name}`,
component: () => import(pages[key]),
})
}
})
src/router/index.js
文件
import Vue from 'vue';
// 注意 ts 写法, js 文件有些不同
import VueRouter, {
RouteConfig } from 'vue-router';
// 引入处理过的数据 就是 route.js 中的
import routerList from './route'
Vue.use(VueRouter);
const routes: RouteConfig[] = [
...routerList, // 合并到 routes 路由配置里面来
{
path: '/',
redirect: '/Home',
}
];
const router = new VueRouter({
routes,
});
export default router;