专栏首页web秀VUE路由拦截:Vue自定义全局弹窗组件

VUE路由拦截:Vue自定义全局弹窗组件

前言

在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等。

抛出前后端混合开发外,vue可以轻松的实现路由拦截。Vue Router对路由集中统一管理,所以我们可以在main.js中添加如下代码,对所有路由进行拦截:

router.beforeEach((to, from, next) => {
  ...
  next();
})

是不是非常便利呢?

Vue自定义全局弹窗组件

有了路由拦截,我们来撸一个全局弹窗组件login.vue

<template>
  <div v-if="visited">
    <div id="login">
      <div class="content">
        <div class="title">会员登录</div>
        <div class="item">
          <input type="text" v-model="phone" placeholder="手机号码" maxlength="11" />
        </div>
        <div class="item">
          <input type="text" v-model="smscode" placeholder="短信验证码" maxlength="4" />
          <span>
            <label>发送验证码</label>
          </span>
        </div>
        <div>
          <button class="submit" @click="submit">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      smscode: '',
      visited: false,
      next: '' // 可以接受参数
    };
  },
  methods: {
    show() {
      this.visited = true
    },
    submit() {
      let vm = this;
      // 调用登录接口200即成功,next()渲染页面
      xxx.then(({data}) => {
        // 登录成功
        vm.next()
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
@import './index.styl';
</style>

index.js

import Vue from 'vue'
import login from './login.vue'

const PopupBox = Vue.extend(login)

login.install = function (data) {
  let instance = new PopupBox({
    data
  }).$mount()

  document.body.appendChild(instance.$el)

  Vue.nextTick(() => {
    instance.show()
  })
}

export default login

然后我们就可以将其挂载到全局,main.js中

// main.js
import login from "./components/login";
Vue.prototype.$login = login.install;

后续,我们在vue页面可以直接使用this.$login(),调起登录弹框。

下面,我们对路由拦截进行处理

路由拦截,登录弹框

// routers.js
...
const routes = [
  {
    path: "/",
    name: "home",
    meta: {
      title: "首页"
    },
    component: () => import("../views/home.vue")
  },
  {
    path: "/order",
    name: "order",
    meta: {
      title: "订单列表",
      login: true
    },
    component: () => import("../views/order.vue")
  }
]
...

这里简单示例,home页面是不需要登录的,而order页面需要登录,我们在meta里面添加login字段来标识,同时去main.js路由拦截里面来判断meta.login处理。

// main.js
router.beforeEach((to, from, next) => {
  // 需要登录进行拦截
  if (to.meta.login === true) {
    // 比如这里调用一个需要登录的接口,
    xxx.then(data => {
      // 200成功表示已经登录
      next();
    }, (resp) => {
      // 错误即为未登录
      login.install({
        next: next 
        // 这里可以传任意值,在login.vue => data
        // 里面定义相同字段名字接收
      });
    })
  } else { // 不需要登录可以直接渲染页面
    next();
  }
})

这样做的本质意思就是,需要登录的页面,我们先调用一个需要登录的接口(后台配合处理,比如约定200表示已经登录,500表示未登录),如果接口返回200,可以把页面内容给用户看,否则,拦截弹出登录框,登录完成,页面给用户看。

router.beforeEach详细介绍

router.beforeEach(全局前置守卫),当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数:

1、to: Route: 即将要进入的目标 路由对象

2、from: Route: 当前导航正要离开的路由

3、next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

(1)next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

(2)next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

(3)next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: truename: 'home' 之类的选项以及任何用在 router-linkto proprouter.push 中的选项。

(4)next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 纯CSS3实现loading虚影加载效果

    从效果而言,我们主要实现下列步骤: 1、让一个圆旋转,并且是先快后慢; 2、有颜色过渡效果、并且有透明度; 3、然后就是复制上面的效果,5个,然后按时间执...

    Javanx
  • 8个问题看你是否真的懂 JS

    JavaScript 是一种有趣的语言,我们都喜欢它,因为它的性质。浏览器是JavaScript的主要运行的地方,两者在我们的服务中协同工作。JS有一些概念,人...

    Javanx
  • 分分钟学会CSS Grid布局

    Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。 CSS Grid 今年也获得了主流浏览器(Safari,Chrome,...

    Javanx
  • CCNP学习笔记(3)

    一、RIPv2:Routing Information Protocol 路由信息协议

    py3study
  • iOS· UIGestureRecognizer 与UITouch 的 locationInView方法含义区别

    UIGestureRecognizer 与UITouch 都有一个 locationInView: 方法。

    陈满iOS
  • 网络工程师从入门到精通-通俗易懂系列 | CISCO私有协议EIGRP路由协议,不难!

    · 默认支持4条等价负载的链路,实现负载均衡的链路 (等价或不等价)最高达到16条

    网络技术联盟站
  • 【RSA 2017】DAY 5 · 最后一天仍有猛料曝 — 卖出两年的汽车仍尽在掌控

    DAY 5 大咖盛宴 欢聚一堂 今天是本届RSA大会的最后一天,安排的议题和小组讨论并不多,但还是有猛料爆出。 在一场有关物联网安全的演讲中,IBM公司X-F...

    安恒信息
  • 15. 电影中成千上万的群众演员是怎么来的?

    当然,这完全也可以通过影视特效来完成——如果有一种技术能够用少量的素材创造出宏大的人群场景,那就可以满足需求,但前提是要非常逼真,天衣无缝。

    HawkWang
  • 「小程序JAVA实战」小程序的横向视频和页面拦截(59)

    PS:小程序一般的开发思路就是尽量前端能办的少麻烦后端,减少交互。这样用户体验就上去了。

    IT故事会
  • XaaS:万物皆可服务

    只要互联网连接以合理的速度广泛应用,并保证足够低的延迟时间,各种服务提供商就开始提供通过这些连接交付可扩展的按需产品。 ? 对于业界的专家而言,现代云计算时代是...

    SDNLAB

扫码关注云+社区

领取腾讯云代金券