vue router 导入方式

Posted 2020-09-21

　　vue router 的路由导入方式可用以下两种：

一：直接导入

import Hello from ‘@/components/Hello‘

@是在webpack.base.conf.js 配置：

 resolve: {
 　　extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
 　　alias: {
 　　‘vue$‘: ‘vue/dist/vue.esm.js‘,
 　　‘@‘: resolve(‘src‘)
 　　}
 }
 

 二 ：路由懒加载方式

　　　当打包构建应用时，javascript包会变得非常大，影响页面加载，路由懒加载可以在路由被访问的

时候才加载对应的组件，这样就更加高效了。

const Foo = resolve =>{
 require.ensure([‘./Foo.vue‘,() => {
 　　resolve(require(‘./Foo.vue‘))
 }])
}　

　　这里还有另一种代码分块的语法，使用 AMD 风格的 require，于是就更简单了：

const Foo = resolve => require([‘./Foo.vue‘], resolve)；

　　之后的使用就跟之前是一样的了

const router = new VueRouter({ 
　　routes: [ { path: ‘/foo‘, component: Foo } ] 
})

参考：https://router.vuejs.org/zh-cn/advanced/lazy-loading.html