Question

在我的Vue路由器中，我使用全局导航防护来检查所请求的路由是否需要查询字符串（to.meta.query）-是否未提供查询字符串，或者其值是否为null ，重定向到父组件并发送错误。

router.beforeEach((to, from, next) => {
  if(to.meta.query) {
    let query = to.query;
    let exists = Object.keys(query).filter(function (key) {
      return query[key] !== null && query[key] !== ''
    })
    if (to.meta.query && exists.length < 1) {
        let error = {
          to: to.name,
          type: "query"
        }
        store.commit('redirectError', error);
        next({ name: 'Search', replace:true})
    }
  }
  next()
})

在我的父组件“搜索”中，我包含了我的错误组件，该组件根据从商店中检索到的错误对象的“至”和“类型”来计算错误消息：

computed: {
  error: function () {
    if (!isEmpty(this.$store.state.error)) {
      this.errorTo = this.$store.state.error.to;
      this.errorMessage = this.calcErrorMessage();

      this.$store.commit('dispatchError', null);
      return true;
    }
    return false;
  }
},

然后使用v模型显示错误本身；

<b-alert variant="danger" dismissible v-model="error">
  {{errorMessage}}
</b-alert>

如何实现error是“反应性的”。因此，当我将路线更改为另一个子组件时，错误消失了吗？我的组件结构：

Search: (parent)
  -SearchForm
  -SearchResult
  -SearchDetail

编辑：

将所有内容放入自己的errorComponent

Answer 1

您应该在错误组件上重置错误

created () {
 this.error = store.state.error;
 this.errorTo = store.state.redirectError.to;
 this.errorMessage = this.calcErrorMessage();

 //reset error
 store.commit('redirectError', null)
},

并且可能还会重新设置后卫

router.beforeEach((to, from, next) => {
 if(to.meta.query) {
  let query = to.query;
  let exists = Object.keys(query).filter(function (key) {
    return query[key] !== null && query[key] !== ''
  })
  if (to.meta.query && exists.length < 1) {
    let error = {
      to: to.name,
      type: "query"
    }
    store.commit('redirectError', error);
    next({ name: 'Search', replace:true})
  }
 }
 // reset error
 store.commit('redirectError', error);
 next()
})

Answer 2

错误组件

在我的情况下，如果缺少某条路线的查询参数（将meta.query设置为true），则错误对象将保存在store;

router.beforeEach((to, from, next) => {
 if(to.meta.query) {
  let query = to.query;
  let exists = Object.keys(query).filter(function (key) {
    return query[key] !== null && query[key] !== ''
  })
    if ((to.meta.query && exists.length < Object.keys(query).length) || (exists < 1)) {
       let error = {
         to: to.name,
         type: "query"
       }
       store.commit('dispatchError', error);
       next({ name: 'Search', replace:true})
   }
 } 
 next()
})

虽然仍在使用 Vuex ，但我将所有内容都放在了单独的错误组件中；

computed: {
  error: function () {
    if (!isEmpty(this.$store.state.error)) {
      this.errorTo = this.$store.state.error.to;
      this.errorMessage = this.calcErrorMessage();

      this.$store.commit('dispatchError', null);
      return true;
    }
    return false;
  }
},

在组件计算功能中，我检查是否已调度错误-读取错误后，将对其进行重置（为改善此问题，也可以使用Vuex吸气剂完成此操作）。 calcErrorMessage根据商店中错误对象的内容返回错误文本。

如果您知道此方法的任何改进，我将非常感谢

导航卫士重定向上的Vuex显示错误消息（和未设置）

编辑：

2 个答案:

错误组件