Vue之mixin(全局)

全局mixin就是给全部Vue文件添加一些公用的实例(方法,过滤器and so on)

使用场景:请求方式,时间格式。这些如果在用到的页面使用的话代码会重复的很多,所以在全局混入这些实例会减少代码量,可维护性也比较高。

ex:

在main.js直接写入

Vue.mixin({
  data () {
    return {
      router: '/',
      plusReady: false
    }
  },
  methods: {
    
    navigatePageTo (url, param) {
      this.$router.push({ name: url, params: param })
    },
    // 跳转到指定url,不会向history里面添加新的记录,点击返回,会跳转到上上一个页面
    reLaunchPageTo (url, param) {
      this.$router.replace({ name: url, query: param })
    },
    // 当前页面向前或向后跳转多少个页面, 0为刷新当前页,1为返回上一个页面,-1向后跳转一个页面
    reGo (n) {
      this.$router.go(n)
    },
    // 请求异常处理
    errHandle (errmsg, errcode) {
      let err = new Promise(resolve => {
        if (errcode === 'DDXJ-E500') {
          // accessToken不合法
          this.$messageBox({
            type: 'alert',
            message: '拒绝访问',
            callback: action => {
              // 用户重新登录
              this.Local.set('loginState', false)
              this.navigatePageTo('login')
              resolve(action)
            }
          })
        } else if (errcode === 'DDXJ-E400') {
          console.log('handle')
          this.$messageBox({
            type: 'alert',
            message: '会话超时,点击确定尝试重新连接',
            callback: () => {
              // 后台静默登录
              // 获取token
              this.$httpRequest({
                url: this.$api.GetoginToken,
                methods: 'get',
                data: {}
              }).then(getLtokenSucc)
                .catch(loginErr)
            }
          })
        
  },
  computed: {
  },
  created () {
  
  },
})

其他页面

Vue之mixin(全局)_第1张图片

 

 

 

你可能感兴趣的:(Vue之mixin(全局))