VUE ルーティング クエリまたは params パラメータが更新されるが、コンポーネント ページ データが更新されないという問題を解決します。

問題の説明:
現在のルートが表示されているときに、同じルートの別のパラメーターにジャンプすると、パラメーターが変更され、ページが更新されません。例えば:


// 使用query参数========

当前路由:http://localhost:8080/user?id=1

目标路由:http://localhost:8080/user?id=2

// 使用params参数========

当前路由:http://localhost:8080/user/1

目标路由:http://localhost:8080/user/2

可以看到query或params参数在地址栏id变化,但是页面未刷新

これは、作成したライフサイクルにルート依存のクエリや params パラメーターの取得が書かれているため、同じルートを 2 回、あるいは複数回読み込んだ関係がモニタリングに達していないため、ページを出て別の記事ページに入っても実行されないためです
。作成されたコンポーネント ライフサイクルにより、最初に入力されたデータが記事データになります。

解決策:
ルートが変更されたかどうかを監視し、パラメーターが同じでない場合は、データを再読み込みしてビューを更新します。


watch: {
    
    
	// 监听路由是否变化
	'$route' (to, from) {
    
     
		if(to.query.id != from.query.id){
    
    
		    this.id = to.query.id; // 把最新id赋值给定义在data中的id
			this.init(); // 重新调用加载数据方法
		}
	}
},

おすすめ

転載: blog.csdn.net/weixin_44248187/article/details/124320828