Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成
因為是單頁面應用
所以每次跳轉都是在切換不同的組件

例如從http://localhost:8088/#/config/form/201012163856507
導航到http://localhost:8088/#/config/form/201009174224173
可能會發生頁面內容不刷新 依舊停留在地址1的內容

那這是為什么呢？
這兩個地址都是用同一個組件，也就是這兩個路由都在使用這一個組件，但是組件的created生命周期鉤子只執行了一次；那么久需要我們手動的去刷新這個組件
（以上是我個人的理解，下面是一些同行的解釋，大家也可以借鑒借鑒）

解決方案：
1、 加上key

<router-view :key="$route.fullPath">

2.添加 watch 監聽路由參數變化強制頁面刷新

watch: {'$route'(to, from) {if (to.query) {this.$router.go(0)}} }

// 但這種方式導致整體頁面刷新而不是路由刷新

3.官方給出的方法是通過 watch 監聽路由變化，做判斷路由路徑然后調用響應的方法

watch: {'$route' () {if (this.$route.path === 'test') {this.test();}} }

4。通過組件導航守衛來設置對應的meta 屬性

beforeRouteEnter: (to, from, next) = > { // 寫在當前組件to.meta.keepAlive = false next() },beforeRouteLeave: (to, from, next) = > { //寫在前一個組件to.meta.keepAlive = falsenext() },

總結

以上是生活随笔為你收集整理的vue-cli 相同页面的跳转，但路由参数不同的情况下 组件状态没有更新的问题是为什么 如何解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。