VUE项目实战（侧重路由）

第一步（页面跳转）

路由配置

1. 路由的异步加载（懒加载）

   本文以跳转网页为例，如果你跳转网页，网址是变化的，但内容不变，那99%的可能是路由的配置问题。以下是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"),
       },
     ]
   })
   

2. 新建文件夹，让home跳转至menu1界面（这个是第一步，因为路由很重要，放在最前面）

3. 然后在vue文件中添加内容就okk了

4. 跳转代码是：

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