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

33次阅读

共计 2050 个字符,预计需要花费 6 分钟才能阅读完成。

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 新手入门指南 知乎

正文完
 0