本文介紹了vue的路由懶加載，分享給大家，具體如下：
我們可以把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件。
代碼
// router里面的index.jsimport 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> ) } })以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
