异步组件?
2018-06-18 本文已影响12人
_____西班木有蛀牙
应该是异步组件:
- 初始化的vue-cli工程
- 新建test文件夹
- 新建test/Test.vue
- 新建test/Test.css
- 新建test/Test.js
// test/Test.vue
<style src="./Test.css"></style>
<template>
<div class="test">Test Components</div>
</template>
<script>
export default {
mounted() {
import("./Test.js").then(res => {
res.default();
});
}
};
</script>
/*
*Test.css
*/
.test {
font-size: 32px;
color: brown;
}
// Test.js
const initTest = () => {
console.log('Test init');
}
export default initTest;
- 设置路由
router/index.js
// 添加 路由/test
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/test/Test.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'Test',
component: Test
}
]
})
- 进入 vue-cli 的工程目录,运行
npm run dev
- 打开浏览器访问
localhost:8080/test
- 可以看到控制台 network 面板下面 有加载
index.js