Vue開發中遇到的問題及解決方案


問題一:npm run dev的時候控制台報錯Vue packages version mismatch,如下面

可是檢查package.json文件里vue和vue-template-compiler的版本確是一樣的

解決方案:把package-lock.json和node_modules這兩個文件徹底刪除然后再重新npm install

 

問題二:路由跳轉前的鈎子容易出現死循環,例如

router.beforeEach((to, from, next) => {
  let url = 'http://10.2.149.109/permission/getPagePermission';
  let data={
    pagename:to.name,
  }
  axios.get(url,{params: data}).then((response)=>{
    if(!response.data.Status){
      return next({path:'/prompt'})
    }
    return next()
  })

})

next()直接跳轉到to.path路徑,沒有再執行一遍beforeEach導航鈎子,而 next({path:'/prompt'})路由跳轉的時候還執行一遍beforeEach導航鈎子,所以上面出現死循環;

解決方案如下:

router.beforeEach((to, from, next) => {
  let url = 'http://10.2.149.106:9897/permission/getPagePermission';
  let data={
    pagename:to.name,
  }
  if(data.pagename=="prompt"){
    next(); //避免出現死循環
  }else{
    axios.get(url,{params: data}).then((response)=>{
      if(!response.data.Status){
        return next({path:'/prompt'})
      }
      return next()
    })
  }
})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM