Comment implémenter le chargement paresseux du routage vue

Cet article présente principalement la méthode d'implémentation du chargement paresseux du routage Vue. Maintenant, je vais le partager avec vous et vous donner une référence.

Cet article présente le chargement paresseux des routes dans Vue et le partage avec tout le monde. Les détails sont les suivants :

Nous pouvons diviser les composants correspondant aux différentes routes en différents blocs de code. , puis lorsque l'itinéraire est Le composant correspondant n'est chargé que lors de l'accès.

1. le composant peut être une fonction de flèche, et nous pouvons utiliser la syntaxe d'importation dynamique pour définir les points de segmentation du code

2. Si vous voulez le voir ; dans le réseau Au nom du composant chargé dynamiquement, vous pouvez ajouter webpackChunkName

3. En même temps, ajoutez chunkFileName

Code

// 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 du 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

Création de deux composants, home et todos, en utilisant routage chargement paresseux. Après la configuration, nous avons exécuté npm Run dev pour exécuter le projet, ouvrir le réseau et le rafraîchir. Nous constaterons que home.js est chargé. Nous constaterons que le nom est le même que le webpackChunkName défini ci-dessus. en même temps, cliquer sur todos chargera todo.js. Il s'agit d'une utilisation simple du chargement paresseux des itinéraires.

Autres

Dans l'entrée du projet dans main.js, nous pouvons utiliser la syntaxe du modèle, ou nous pouvons utiliser la fonction de rendu

new Vue({
 el: '#app',
 router,
 components: { App },
 /*
 * 这里使用的template的语法
 * 也可以使用render函数,直接return一个html结构
 */
 // template: &#39;<App/>&#39;
 render() {

  return (
   <p>
    <App></App>
   </p>
  )
 } 
})

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Un exemple simple de l'effet d'aperçu local des images téléchargées implémenté par jQuery

Quelques problèmes courants dans les interviews JavaScript Mauvais points réglés

exemple de code d'interception de demande vue axios

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!