Vue 问题记录

vue-router 报错——Navigation cancelled……with a new navigation.

连续使用 this.$router.go(-1) 和 this.$router.push() 出现了这个报错。把第二次跳转加个延迟就好了。

vue.js devtool 里 vuex 数据不更新

vuex 里只有 base,数据也一直不更新。这是因为直接对 store 进行了赋值。要想 devtool 显示数据变化,需要通过 commit 更新数据。

Right-hand side of ‘instanceof’ is not an object

不知道有没有其他情况出现这种错误,我这里是因为 prop 属性的类型是 [Number, null],同时 required 设为了 true。按照 vue 文档的说法,type 只能是以下几种原生构造函数或者自定义构造函数:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

vue 组件是否销毁的判断

一开始以为可以通过 !this 判断,这是不对的,应该判断 this._isDestroyed。

vue-router 通过 name 跳转无法达到 404 页面

测试版本:vue-router@3.0.2

vue-router 可以通过 path 或者 name 跳转页面。但是,通过 name 跳转时,如果没有匹配的路由,不会自动跳转到 404 页面。因为 vue-router 没有对此进行处理。

解决方法:在 router.afterEach 里判断 to.matched.length

router.afterEach((to) => {
  // 如果没有匹配的路由,跳转 404
  if (to.matched.length === 0) {
    router.replace('/404')
  }
  // finish progress bar
  NProgress.done()
})

不要在 beforeEach 里判断,会误判。比如登录之后,有权限的路由通过 addRoutes 添加到路由表里之前的这段时间里,访问的路由的 matched 就是空的。

vue3 useRoute 是 undefined

useRoute 和 useRouter 需要在 setup 函数自身使用——不能在 setup 里其他函数使用。