Vue Router 是 Vue.js 官网的路由管理器。它和 Vue.js 的外围深度集成，让构建单页面利用变得大海捞针。学习Vue，Vue Router是必须要把握的技能之一。官网教程是最好的的浏览文献，请仔细阅读

利用场景

首先，咱们聊一个vue-router的典型利用场景

产品经理: 某天，产品经验拿着掘金APP说，这是APP很漂亮，咱们也要做一个Web APP，款式呢，照抄掘金APP的款式就行。

要求:

  1. 底部导航栏: 底部一排固定不动的按钮
  2. 顶部导航栏: 顶部**也有一排固定不动的按钮
  3. 顶部也有一个带有返回按钮的导航栏固定不动，点击底部导航栏之后，两头局部的页面应该跳转到对应性能页面，点击顶部的返回按钮之后，应该返回到之前的页面。
  4. 加载页面时尽可能的缩小刷新，甚至是不刷新。优化用户体验
  5. 加载速度肯定要疾速，且尽可能的缩小流量的耗费
  6. URL要好看丑陋，并且URL能够动静承受参数。如：

http://music.163.com/#/my/m/m...

需要剖析

菜鸟: 菜鸟拿到需要，前三个需要比较简单，应用css的display属性进行切换就能够搞定。第四个和第五个需要怎么搞呢？加载页面的时候，必定要做页面申请的，页面资源也是很大的流量的。至于第6个性能嘛，好难搞呀。抓耳挠腮中......

老鸟: 菜鸟呀，看你这苦思冥想的，遇到什么难题了？

菜鸟: 天杀的产品经理，让我做我的项目，还提了一堆附加要求，我都想拿大刀砍死他了。与产品经理唇齿相依

老鸟: 哎呀，别着急呀。一看你就是陷入传统开发的思维定势了。都2020年了，还不晓得单页面开发，你太out喽？

菜鸟：何为单页面开发呀，给我讲讲呗？这么神奇的吗？能解决我的难题？

老鸟：内事不决为百度，当初学习也为时不晚。哈哈。

菜鸟：努力学习中......

何为单页面

只有一个WEB主页面的利用，公共资源(js、css等)仅需加载一次，所有的内容都蕴含在主页面，对每一个功能模块组件化。单页利用跳转，就是切换相干组件，仅刷新部分资源。罕用于PC端官网、购物等网站。

何为多页面

每一次页面跳转的时候，后盾服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页利用。传统页面的写法大多为多页面

Vue-Router

装置

npm
npm install vue-router
// main.jsimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)

根本路由配置

export const constantRouterMap = [  ...,  {    path: '/',    component: Layout,    // 重定向    redirect: '/dashboard',    // 嵌套多级路由    children: [      {        path: 'dashboard',        component: () => import('@/views/Dashboard'),        name: 'Dashboard',        // 路由元信息        meta: { ... }      }    ]  },  ...]

路由拆分

咱们能够依据业务能够将路由拆分为一般路由和Admin路由

根本路由

任何人都能够查看的路由。如首页。

特有权限路由

管理员登陆后获取的特有的专属权限页面。此路由页面依据权限的不同而进行不同的展现

私有权限路由

权限拦挡页面。如403， 403， 503...

路由管制

  1. 通过vue-router beforeEach钩子管制路由跳转
  2. 通过vue-router addRoutes办法注入路由实现管制

（1） beforeEach

通过申请服务器获取以后用户路由，钩子对每次的路由跳转进行判断，如果行将进入的路由对象为根本路由和权限路由，则失常跳转。否则勾销跳转，转向谬误页

router.beforeEach((to, from, next) => {  // ...  /*    to: Route: 行将要进入的指标 路由对象    from: Route: 以后导航正要来到的路由    next: Function: 肯定要调用该办法来 resolve 这个钩子。执行成果依赖 next 办法的调用参数  */})

（2） addRoutes

动静增加更多的路由规定。参数必须是一个合乎 routes 选项要求的数组。

通过调用addRoutes办法，注入到vue-router实例中，以实现路由管制

router.addRoutes(routes: Array<RouteConfig>)

过渡动画 - NProgress

npm install --save nprogress
// Simply call start() and done() to control the progress bar.NProgress.start();NProgress.done();

实现原理

在vue-router中是通过mode这一参数管制路由的实现模式的：

const router = new VueRouter({  mode: 'history',  routes: [...]})

更多原理内容，请看下一篇...

参考资料

  1. Vue-Router
  2. Nprogress
  3. Vue-router新手入门指南 知乎