VUE项目实战

Ant Design Vue项目

第三步（整体运用）

新建导航栏的跳转界面

1. 以view文件夹的menu1、menu2网页为例，项目文件目录：

2. router里的index.js配置如下：

   import Vue from 'vue'
   import Router from 'vue-router'
   import Layout from '../layout/index.vue'
   
   Vue.use(Router)
   
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'layout',
         component: () =>
           import("../layout/index.vue"),
           children:[
             {
               path: '/view/menu1',
               name: 'menu1',
               component: () =>
                 import("../view/menu1/index.vue"),
             },
             {
               path: '/view/menu2',
               name: 'menu2',
               component: () =>
                 import("../view/menu2/index.vue"),
             }
           ]
       },
       
     ]
   })
   复制代码

3. 修改layout文件夹的vue文件，内容部分代码如下：

   <a-layout-content
             :style="{
               padding: '24px',
               minHeight: '280px',
             }"
           >
             <router-view></router-view>
           </a-layout-content>
   复制代码

   在导航栏添加跳转标签

   <a-menu-item key="1">
                 <router-link to="/view/menu1">vue</router-link>
               </a-menu-item>
               <a-menu-item key="2">
                 <router-link to="/view/menu2">react</router-link>
               </a-menu-item>
   复制代码

4. 在menu1、menu2添加元素

5. 其中布局是不变的，当中的内容content是变化的

总结

1. 路由配置是项目成功的关键
2. 路由很重要，layout布局里面的内容根据它来变化的