vue2企业级项目（四）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2企业级项目（四）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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修改内容

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