一些项目遇见的实际bug问题——路由重复点击报错等

本文主要记录自己在实习ing,项目遇到的一系列问题

Uncaught (in promise) NavigationDuplicated

vue-router.esm.js?68cf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "".

这个问题实际上只有我们的路由重复出发才会报错，虽然不会影响运行结果，但是红的真的太多了。在路由进行跳转的时候，好像是因为vue-router3版本之后，使用了promise,而声明式导航没有这种问题，因为vue-router底层已经处理好了。

网上找了各种方法，这里进行总结一下。

方法一 全局配置路由

在router文件夹index.js里面配置

//全局路由配置， 重复路由不报错
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push(to){
    return VueRouterPush.call(this,to).catch(err => err)
}
const VueRouterReplace = Router.prototype.replace
Router.prototype.replace = function replace(to){
    return VueRouterReplace.call(this,to).catch(err => err)
}

或者

const VueRouterPush = VueRouter.prototype.push
Router.prototype.push = function push(to){
    return VueRouterPush.call(this,to).catch(err => err)
}
const VueRouterReplace = VueRouter.prototype.replace
Router.prototype.replace = function replace(to){
    return VueRouterReplace.call(this,to).catch(err => err)
}

主要取决于，你是利用什么进行创建的路由。

方法二，单个路由方法进行判断

这种方法比较单一，复杂，因为等同于，在每个有这个问题的地方，都要加一个判断，是否是重复路由,路由不重复进行跳转操作。

if(this.$router.path !== ''){
    this.$router.repalce('')
}

element-ui 使用 时间选择器报错的问题

[Vue warn]: Avoid mutating a prop directly since the value will be 52c32:574 wue . runtime .esm . overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement'

通过查找资料，发现这是版本问题，导致的情况。因为组件传参的时候，porp是要尽量避免更改的，否则就可能会有这种问题。在2.15.9版本里面，因为多了一个placement变量，而这个变量每次重新渲染都会被重新赋值。

方法一

直接替换element-ui版本号，降到2.15.9之下的版本。

方法二

不改版本，也可以通过将align="center",网上看到说，好像是因为placement 是通过align赋值原文作者-空空墓志铭

关于组件拿取值，或者本地拿取值容易出现的bug

最近在改代码的时候发现，vue里面通过this.$router.在一个页面拿取的参数是一个字符串，因为我在存的时候是要numebr类型的，然后我拿取，得到的却是一个字符串类型的，这就对我的代码有很大的问题，一些判定条件都不会生效，甚至，一个布尔值传过来也是字符串。

在vue项目中，我们用函数式编程this.$router.push跳转，用query传递一个对象时要把这个对象先转化为字符串，然后在接收的时候要转化为对象，要不然会接收不到参数。要不就把参数分开传递，不要放到对象里。

如果是单独参数，那么就使用之前需要进行转化一次。

对于布尔值字符串转换，有一个很便捷的方法，JSON.parse('true')拿到的是true。 对了，在本地存储拿取的值的时候也要记得转换，不然可能会报一个value 不是某个对应的属性值

关于vuex，传参以及一些常见bug问题

这个问题在于把store里面的内容在外面进行了更改，重要重要重要,store里面的内容如果想拿出来，不影响store,一定要深拷贝，不然肯定有问题。 两种方式改变store里面的值，

1

在store里面封装好方法，然后外面emit方法

2

在外面直接对深拷贝的值进行操作，然后将整个拷贝的值，传给store里面的内容。

对了vuex里面，commit,传参好像是只能两个，第一个外面一般放的是对象，第二个是我们要传递的参数。如果要传递多个参数，可以用对象的形式进行传递。

this.$emit('obj',{name:name,age:age)

今日总结笔记到此结束-如果不对，还请加以斧正