首页 > 代码库 > vue router 导入方式

vue router 导入方式

2024-10-02 02:25:39   215人阅读

　　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
 

vue router 导入方式


联系
我们