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 里其他函数使用。