本文介紹了vue的路由懶加載，分享給大家，具體如下：
我們可以把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件。
代碼
// router里面的index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
/*
* 使用動態組件，component可以是一個箭頭函數
* @表示src目錄
* 如果想在network里面看到動態加載的組件名字，可以加webpackChunkName，同時要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName
* network里面動態加載模塊名稱
*/
component: () => import(/* webpackChunkName: 'home' */'@/pages/Homes')
},
{
path: '/todos',
name: 'Todos',
component: () => import(/* webpackChunkName: 'todo' */'@/pages/Todos')
}
]
})
注意 上面的@代表當前src目錄，具體可以去參考webpack的配置
webpack.base.conf.js里面添加 chunkFilename: '[name].js'
output: {
path: config.build.assetsRoot,
filename: '[name].js',
// 需要配置的地方
chunkFilename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
}
分析
創建了home和todos兩個組件使用了路由懶加載，配置好之后我們執行npm run dev來運行項目，打開network之后刷新一下，我們會發現加載了home.js，我們會發現和上面定義的webpackChunkName名字一樣，同時點todos會加載todo.js。這就是路由懶加載的簡單使用。
其他
在main.js里面項目的入口我們可以使用template的語法，也可以使用render函數
new Vue({
el: '#app',
router,
components: { App },
/*
* 這里使用的template的語法
* 也可以使用render函數,直接return一個html結構
*/
// template: '<App/>'
render() {
return (
<div>
<App></App>
</div>
)
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
