vue2企业级项目（四）

路由设计，过场动画设计

1、router

1. 项目下载依赖

   npm install --save vue-router@3.5.3
   

2. src目录下创建router/index.js

   import Vue from "vue";
   import Router from "vue-router";Vue.use(Router);const router = new Router({mode: "history",base: "/",routes: [{path: "/",redirect: "/page1",},{path: "/page1",component: () => import("@/views/page1.vue"),},],
   });router.addRoutes([{path: "/page2",component: () => import("@/views/page2.vue"),},
   ]);export default router;

3. 创建router/modules文件，并使用require.context技术进行动态引入。

4. 创建router/hook.js文件，编写路由拦截等操作

5. 使用router.addRoutes方法，动态设置后端传入的路由。（不建议）

   • 前端开发需要路由来找具体的页面，也可以快速创建路由页面
   • 后端配置路由，增加了前后端沟通成本
   • 而且开发完成后，完全可以在正式环境，切换成后端路由配置。
   • 最完美方案，优先给开发的系统添加系统管理功能。让开发配置变得更加友好。能够直接配置权限，人员，账号，角色，机构等等。这样前端就可以直接设置权限，也不需要和后端进行讨论和沟通。快速开发

2、过场动画

进度条

1. 下载插件nprogress

   npm install --save nprogress
   

2. 在router/hook.js填写如下内容

   import NProgress from "nprogress";
   import "nprogress/nprogress.css";NProgress.configure({ showSpinner: false });export default function(router) {router.beforeEach((to, from, next) => {NProgress.start();next();});router.afterEach(() => {NProgress.done();});return router;
   }

3. 同理也可以在请求函数里面添加nprogress

进场动画

1. 下载插件animate.css

   npm install --save animate.css
   

2. style/index.less引入animate.css

   @import "~element-ui/lib/theme-chalk/index.css";
   @import "~animate.css";

3. App.vue修改内容

   <transitionenter-active-class="animate__animated animate__fadeIn"leave-active-class="animate__animated animate__fadeOut"
   ><router-view />
   </transition>
   

4. animate.css文档地址

   https://animate.style/