Vue的一些坑

Vue的一些坑

最近做个人项目的时候遇到的一些问题以及解决方法

图片object Module

这个是我在Webpack+Vue的时候出现的问题

问题描述：在导入图片的时候，导入不成功，在控制台查看的时候发现了问题

问题解决：file-loader还是url-loader都在use里加上options:{esModule: false}即可，代码如下：

{test: /\.(png|jpe?g|svg|gif)$/,use: [
      {
          loader:"url-loader",
          options:{esModule: false}
      }
  ]}

作用是启用CommonJS模块语法，重启webpack，即可

路由跳转问题

路由的跳转的四种方式

问题描述：在使用this.$router.push和this.$router.replace的时候发生了报错，且不会跳转到对应的页面

使用$router跳转路由问题

报错信息：Avoided redundant navigation to current location
问题描述：在进行路由跳转的时候，控制台会出现这个报错，但是不影响正常使用，但是又错误还是要解决的
解决方法：在引入文件路由的那个文件中添加以下代码

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

绑定异步数据

报错信息：Error in render: "TypeError: Cannot read property 'xxx' of null"
问题描述：再请求到数据动态的绑定到页面上的时候，数据渲染上去了，却发生了此报错
解决方法：既然是报错null，那么我们只需要在外层添加一个条件判断即可