乐趣区

关于router:从零开始用elementui躺坑vue-router

jiezi

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.js
import 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 新手入门指南 知乎
退出移动版