針對Vue相同路由不同引數的重新整理問題

在使用vue和vue-router開發spa應用時，我們會遇到這樣一種問題。

當頁面跳轉時，元件本身並沒有發生改變：

// 路由對映關係'/form/:type' // 當前頁面路由/form/shop1

this.$router.push()

這時我們進行路由跳轉後會發現元件並沒有重新整理，在前乙個路由元件的資料都保留了下來，這並不是我們想要的效果。

對於簡單的資料更新，我們可以直接監聽路由引數並重新獲取路由的初始化資料即可，

但是對於有很多子元件需要初始化或者reset的情況，我們還是有必要重新執行元件的生命週期。

針對這種情況可以使用三種方式解決：

1.為相同路由頁面的跳轉進行中間路由替換，在router上註冊beforeeach全域性守衛進行攔截，跳轉到乙個中間路由（例如empty），再從中間過渡路由跳轉至要去的路由。

// 全域性導航守衛
router.beforeeach((to, from, next) => })
} else 
})// 中間過渡路由
let topath = this.$route.query.topath
if (this.topath) )
}

2.使用v-if重新渲染當前頁面元件

// html部分
// script部分
export default 
},methods: 
}}

這樣把方法註冊到跟元件上，對於想重新整理的元件直接呼叫reload方法即可。

3.使用vue文件元件繫結的key值來進行強制重新整理

vue文件說明了當你需要

的時候可以利用更新元件繫結的key值來完成更詳細的說明

這樣直接為元件繫結與路由引數關聯的值即可

綜合來看，第三種方式最簡單，推薦使用。

示例新聞列表頁新聞詳情頁傳值一動態路由 1 配置動態路由 main.js 及截圖 the vue build version to load with the import command runtime only or standalone has been set in webpack....

先上效果圖這個效果實現起來很簡單，只需要用到vue router中的全域性路由守衛分別有beforeeach 進入路由之前 beforeresolve 解析路由以及全域性後置鉤子aftereach 我們可以簡單的看一下這三個守衛和生命週期函式的關係，我們用日誌列印一下看看可以看出，這三個守衛...

前兩天參加阿里雲7天培訓，用python flask寫了乙個基於阿里雲視覺ai平台的識別身份證駕駛證以及車牌自動生成汽車保險單這麼乙個小玩意，搞了我一晚上，頭疼，到最後還是個半成品通過上傳身份證駕駛證以及車牌，呼叫阿里雲的api，去識別裡資訊，將返回的資訊回填到乙個汽車保險單上。那麼怎麼在不...