vue router自动导入,动态导入,异步加载组件
router自动加载组件具体详情 router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let siteRoutes = [];
function importAll(r) {//r 参数自带两个处理属性一个keys 一个是resolve 这里用的keys 具体看官网APi: context module API
r.keys().forEach((key) => {
let path = (key.split('.'))[1];//key 就是带了./的文件名 比如我这里打印出来是./About ./Home ./Test 这样你就懂path 和name为什么这样写
path.indexOf('Home') > -1 ? path = '/' : '';// home页面会被解析为/home,/ 访问为空白,所以做个判断path转为 / 。
siteRoutes.push({
path: path,
name: path.substring(1),
component: () => r(key)
})
});
}
importAll(require.context('../views/', false, /\.vue$/, 'lazy'));// 第二个参数指是否使用子目录 第四个参数是指是否异步 lazy/sync
const routes = [
...siteRoutes,
]
//importRouter(pages)
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
我的文件结构 我是多站点配置 不用看我外层结构看views文件就可以了
文件结构
花予尘: 太厉害了大佬,我之前看的一直是错误的知识,怪不得登录不进去
失意.ޓއއއ465: 瞎科普
不忘初心1995: onloadeddata 在ios还是没触发呀
weixin_47641829: 上传预览的组件有源码吗
摩登开发者Oliver: 嗯打快了beforeEnter哈