vue常用功能及注意事项

1，路由跳转（A页面 -> B页面）
A: this.$router.push({name: 'routerName', query: {key: 'value'}})
B: this.$route.query.key // 获取value值

注：B页面是$route，而不是$router，也可以将query替换成params

2，img标签动态绑定静态src地址时，图片不能正常显示，解决办法用require引入地址

<img :src='imgUrl'>
...
data() {
  return {
    imgUrl: require('./img.png')
  }
}

3，props验证
props: {
// 必须是数字类型
propA: Number,
// 必须是字符串或数字类型
porpB: [String, Number],
// 布尔值，如果没有定义，默认值就是true
propC: {
type: Boolean,
default: true
},
// 数字，而且是必传
propD: {
type: Number,
required: true
},
// 如果是数组或对象，默认值必须是一个函数来返回
propE: {
type: Array,
default: function(){
return []
}
}
// 自定义一个验证函数
propF: {
validator: function(value){
return value > 10
}
}
}

验证的type类型包括

• String
• Number
• Boolean
• Object
• Array
• Function

4，vue项目中引入的js文件中，JSON.stringify()报错问题
项目根目录下 babelrc 文件中的
'plugins': ["transform-runtime"]
改为
'plugins': []