vue2企业级项目（四）

路由设计，过场动画设计

1、`router`

项目下载依赖
```
npm install --save vue-router@3.5.3
```

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;

创建router/modules文件，并使用require.context技术进行动态引入。
创建router/hook.js文件，编写路由拦截等操作
使用router.addRoutes方法，动态设置后端传入的路由。（不建议）
- 前端开发需要路由来找具体的页面，也可以快速创建路由页面
- 后端配置路由，增加了前后端沟通成本
- 而且开发完成后，完全可以在正式环境，切换成后端路由配置。
- 最完美方案，优先给开发的系统添加系统管理功能。让开发配置变得更加友好。能够直接配置权限，人员，账号，角色，机构等等。这样前端就可以直接设置权限，也不需要和后端进行讨论和沟通。快速开发

2、过场动画

进度条

下载插件nprogress
```
npm install --save nprogress
```

在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;
}

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

进场动画

下载插件animate.css
```
npm install --save animate.css
```

style/index.less引入animate.css

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

App.vue修改内容

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