vue 问题合集

1. vue-router配置路由，当前路径与跳转路径一致时，会报错。

NavigationDuplicated: Avoided redundant navigation to current location: 

所以在router的js里修改，添加

import Router from 'vue-router'

//修改router的跳转事件，取消报错提示。 const originalReplace = Router.prototype.replace
const originalPush = Router.prototype.push
Router.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err)
}
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
} 

1. 上传文件接口接受不到参数

在 axios 的 headers 加上 'Content-Type': 'multipart/form-data',

传值使用 FormData 函数

const formData = new FormData()
fileList.forEach((file) => {
  formData.append('file', file)
}

axios.post(url,formData,{
  headers:{
    'Content-Type': 'multipart/form-data',
  }
}) 

1. 给input赋值时，值不能重组两次

let obj=[{a:1,b:2}]

//错误
obj=[{a:1,b:3}]

//正确
obj[0].a=1;
obj[0].b=3

1. 监听数据或对象时，获取的新值和旧值一致时

data(){
  obj:[{a:1}]
},
watch:{
  newObj:{
    handler(new,old){},
    deep:true
  }
},
computed:{
  newObj(){
    return JSON.parse(JSON.stringify(this.obj))
  }
} 

1. 使用keep-alive 和 vue-router 做页面缓存。

使用场景：A列表页➡B详情页，缓存A列表页的视图，使A不会被销毁。

当B➡A时，能够看到跳转前的数据。

当A➡B➡C➡A时，A不缓存，并且重新渲染。

当A➡C时，A同上。

此时需要配置的路由信息

//vue router "A": {
  "meta": {
    "keepAlive": true
  } 

模板页(只要使用router-view的地方即可)

列表页

beforeRouteEnter(to, from, next) {
  if (from.path == 'B') {
    to.meta.keepAlive = true
  }
  next()
},
beforeRouteLeave(to, from, next) {
  from.meta.keepAlive = false
  next()
} 

Tip：在router-view使用v-if 前一两次切换页面时是正常显示，到后面就不对了。

估计是 router-view 不能正常支持 v-if。

因为在 router-view 使用 v-show 是正常显示的，但是使用 v-show 会渲染数据两遍，所以我使用一个标签包裹 router-view，然后使用v-if，标签不一定使用transition，用div也可。

持续更新ing