vue 路由守卫及elementUI 的Message在main.js里的使用

vue 提供了路由改变前后的路由导航守卫，在改变前后的两种方法是：全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ...})全局后置守卫router.afterEach((to, from) => {// ......

Slient-猿

2737人浏览 · 2019-03-08 16:01:03

Slient-猿 · 2019-03-08 16:01:03 发布

vue 提供了路由改变前后的路由导航守卫，在改变前后的两种方法是：

全局前置守卫：

const router = new VueRouter({ ... })

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

全局后置守卫

router.afterEach((to, from) => {
  // ...
})

一个调用后台接口验证是否登录的写法：

import { Message } from 'element-ui';
Vue.prototype.$message = Message;


router.afterEach((to, from) => {
    debugger
    this.url=///校验是否登录url
    axios({
        method: 'get',
        url: this.url
    }).then(function (res) {
     
            if (res.data.code ==0) {
                Message({
                    message: "用户未登录",
                    type: 'waring'
                })
                window.location.href = //登录url
            }

       
    }).catch(function (e) {
        root.$message({
            message: e.message,
            type: 'error'
        })
    });
    console.log("调用后")
    // ...
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^