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()

　　　　})

　　}

})