How to realize Route dynamic loading in VUE

This article focuses on "how to achieve dynamic routing loading in VUE". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to achieve dynamic routing loading in VUE"!

First of all, build a new vue project. Generally speaking, we will not specially deal with routing, but when there are more and more project pages, the routing configuration will become larger and larger, and the routing files will become difficult to maintain.

Import Vue from 'vue'import Router from' vue-router'import HelloWorld from'@ / components/HelloWorld'import Home from'@ / components/Home'import Test1 from'. / test1.router.js'import Test2 from'@ / components/children/Test2'import Test3 from'@ / components/children/Test3' Vue.use (Router) export default new Router ({routes: [{path:'/ HelloWorld', name:' HelloWorld', component: HelloWorld}, {path:'/', name:'Home' Component:Home, children: [{path:'/test2', name:'Test2', component:Test2,}, {path:'/test3', name:'Test3', component:Test3,}]})

This is a very simple routing file, we advanced the first step of optimization, classified by level 1 menu:

Create a new test1.router.js file and place all the routing information under the first-level menu test1

Export default {path:'/test1', name:'test1', component: () = > import ('@ / components/children/Test1'), children: []}

Component: () = > import ('@ / components/children/Test1') this is to configure the route to load lazily, and to optimize the slow loading of the first screen

Introduce this file in index.js

Import Vue from 'vue'import Router from' vue-router'import HelloWorld from'@ / components/HelloWorld'import Home from'@ / components/Home'import Test1 from'. / test1.router.js'import Test2 from'. / test2.router.js'import Test3 from'. / test3.router.js'Vue.use (Router) export default new Router ({routes: [{path:'/ HelloWorld', name:' HelloWorld', component: HelloWorld}, {path:'/', name:'Home' Component:Home, children: [Test1, Test2, Test3]}]})

To achieve this, many projects can already be satisfied, and the routing file is already very clear, but when the project is larger, it will still be unclear.

Import Vue from 'vue'import Router from' vue-router'import Home from'@ / components/Home'Vue.use (Router) let routers = [] Let getALLRouterMsg = (paths) = > {paths.keys () .forEach ((key) = > routers.push (paths (key) .default))} getALLRouterMsg (require.context ('., true,/\ .router\ .js /)) export default new Router ({routes: [{path:'/', name:'Home', component:Home, children: [... routers]}]}) so far I believe you have a deeper understanding of "how to achieve dynamic routing loading in VUE", so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!