龙空技术网

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

web秀 11288

前言:

现时朋友们对“vue appendchild报错”都比较注意,同学们都需要了解一些“vue appendchild报错”的相关资讯。那么小编在网络上搜集了一些有关“vue appendchild报错””的相关内容,希望我们能喜欢,同学们一起来了解一下吧!

点击右上方红色按钮关注“web秀”,让你真正秀起来

前言

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



抛出前后端混合开发外,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.jsimport 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.jsrouter.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: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

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

总结

喜欢小编或者觉得小编文章对你有帮助的,可以点击一波关注哦!同时,要源码的小伙伴可以点击下方“了解更多”。

标签: #vue appendchild报错 #vue append用法