vue路由懶載入

2021-08-21 07:45:19 字數 503 閱讀 1998

import vue from 'vue'

import vuerouter from "vue-router"

vue.use(vuerouter);

var router = new vuerouter({

routes: [

{name: "登陸",

path: '',

component: resolve =>  require.ensure(, () => require('../components/login/login'), '

login

')  //

後面的這個login是打包以後的檔名。最好是乙個模組乙個名字。但是測試卻沒起作用不知道怎麼回事啊??哎。下面的才是對的。

component:resolve => require(['./components/login/login'], resolve)
只需要修改這個router檔案就可以啦,其他地方不用改。

vue路由懶載入

方法一 resolve 這一種方法較常見。它主要是使用了resolve的非同步機制,用require代替了import,實現按需載入,下面是 示例 import vue from vue import router from vue router import helloworld from com...

Vue路由懶載入

常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 未使用懶載入 import vue from vue import router from vue router import helloworld from components helloworld 未用懶載入 vue.use...

vue 路由懶載入

我們可以把不同路由對應的元件分割成不同的 塊,然後當路由被訪問的時候才載入對應元件。component可以是乙個箭頭函式,我們可以使用動態 import語法來定義 分塊點 如果想在network裡面看到動態載入的元件名字,可以加webpackchunkname 同時要在webpack.base.co...