Maison > Article > interface Web > Explication détaillée des exemples de chargement paresseux du routage de vue
Cet article présente principalement la méthode d'implémentation de chargement paresseux du routage Vue. Nous pouvons diviser les composants correspondant aux différentes routes en différents blocs de code, puis charger les composants correspondants lors de l'accès à la route. J'espère que cela aide tout le monde.
le composant peut être une fonction fléchée, nous pouvons utiliser la syntaxe d'importation dynamique pour définir les points de segmentation du code
Si vous voulez le voir dans le réseau Au nom du composant chargé dynamiquement, vous pouvez ajouter webpackChunkName
En même temps, ajoutez chunkFileName
// 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') } ] })Notez que @ ci-dessus représente le répertoire src actuel. Pour plus de détails, veuillez vous référer à la configuration de 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 }
Analyse
Autres
new Vue({ el: '#app', router, components: { App }, /* * 这里使用的template的语法 * 也可以使用render函数,直接return一个html结构 */ // template: '<App/>' render() { return ( <p> <App></App> </p> ) } })Recommandations associées :
Le principe et la mise en œuvre du chargement paresseux de jquery
Utiliser des images paresseuses in vue Chargez le plug-in vue-lazyload
À propos du fractionnement du code Vue et du chargement paresseux
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!