今天复制项目的时候，发现想使用component: () =>import (’ ')去加载路由，写好后保存发现报错了
发现是import处报错， import 属于异步引用组件，需要特殊的 babel-loader 处理。以下是我记录的办法
cnpm install babel-plugin-syntax-dynamic-import -D
然后在build文件下的webpack.base.conf.js文件中的module.exports修改module，添加
options: {
plugins: [‘syntax-dynamic-import’]
}
然后运行，完美解决
//require.ensure是webpack里面的，这样做会将单独拉出来作为一个chunk文件
const Login = r => require.ensure( [], () => r (require(‘../
component
/Login.
vue
’)));
但现在
vue
-router的官网看看，推荐这种方式：
//
vue
异步
组件
和webpack的【代码分块点】功能结合，实现了按需加载
const App = () =>
import
(‘../
component
/Login.
vue
’);
可是，很多情
//require.ensure是webpack里面的，这样做会将单独拉出来作为一个chunk文件
const Login = r => require.ensure( [], () => r (require('../
component
/Login.
vue
')));
但现在
vue
-router...
1.Error: Cannot find module 'function () {
return __webpack_require__("./src/comp
2.
vue
报错
[
Vue
warn]: Failed to mount
component
: template or render function not defined.
3.
vue
报错
Uncaught (in promise) Error: Cannot find module '@/views/Home.
vue
'
//route.js
const App = () =>
import
('../App.
vue
');
const Login = () =>
import
('../
component
/Login.
vue
');
const Class = () =>
import
('../
component
/Class.
vue
');
const Course
List
= () =>
import
('../
component
/Course
List
.
vue
');
const CourseContent = () =>
import
('../
component
/CourseContent.v
import
React, {
Component
} from 'react';
export default calss MainApp extends
Component
{
state = {
student: [
name: 'Jenny',
id: 'a001'
name: 'Jerry',
id: 'a002'
render() {
return (
Vue
-router动态加载
组件
的语法方式为:
component
: ()=>
import
()返回对应的
组件
,最近在项目中不下心写成了
component
: ()=>{
import
()},由此引发了ES6中箭头
函数
语法的问题：
1. ()=>: 没有{}的时候，箭头
函数
指向的就是这个
函数
的返回值(对应的
组件
,这个
路由
就会显示内容啦)；
2.()=>{}: 有{}的时候，...
const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/login', name: 'login',
component
: () =>
import
('../views/Login.
vue
') }, { path: '/',
component
: () =>
import
('@/views/AdministratorsView.
vue
'), redirect:'/forum/article', children: [{ path: '/forum', name: '内容管理', children: [ { path: 'article', name: '帖子管理',
component
: () =>
import
('@/views/forum/Article
List
.
vue
'), },{ path: 'comment', name: '评论管理',
component
: () =>
import
('@/views/forum/Comment
List
.
vue
') },{ path: 'board', name: '板块管理',
component
: () =>
import
('@/views/forum/Board
List
.
vue
') } ] },{ path: '/user', name: '用户列表', children:[ { path: 'User
List
', name: '用户列表',
component
: () =>
import
('@/views/user/User
List
.
vue
'), }, ] },{ path: '/settings', name: '设置', children:[ { path: 'sys', name: '用户列表',
component
: () =>
import
('@/views/settings/SysSettings.
vue
'), }, ] }, ] }, ] })不显示中间用户列表
