VUE project practice (emphasis on routing)

Step 1 (Page jump)

The routing configuration

1. Asynchronous loading of routes (lazy loading)

   This article takes the jump web page as an example. If you jump to a web page, the url is changed, but the content remains the same, it may be 99% of the routing configuration problems. Here is the code for router/index.js:

   import Vue from 'vue'
   import Router from 'vue-router'
   
   Vue.use(Router)
   
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'home',
         component: () =>
           import("../home/home.vue"),
       },
       {
         path: '/view/menu1',
         name: 'menu1',
         component: () =>
           import("../view/menu1/index.vue"),
       },
       {
         path: '/view/menu2',
         name: 'menu2',
         component: () =>
           import("../view/menu2/index.vue"),
       },
     ]
   })
   Copy the code

2. Create a new folder and redirect home to the MENU1 interface (this is the first step, because routing is important, it comes first)

3. Then add content to the vue file to make okK

4. The jump code is:

   <router-link :to="{path:'/view/menu1'}">click</router-link>
   Copy the code