1. 程式人生 > >vue router 導入方式

vue router 導入方式

line 組件 tps con path outer 分塊 load https

  vue router 的路由導入方式可用以下兩種:

一:直接導入

import Hello from ‘@/components/Hello‘
@是在webpack.base.conf.js 配置:
 resolve: {
   extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
   alias: {
   ‘vue$‘: ‘vue/dist/vue.esm.js‘,
   [email protected]: 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 導入方式