[解決済み] Vue-Routerを使用してVueでURLクエリパラメータを設定する方法

質問

でクエリパラメータを設定しようとしています。 Vue-ルーター 入力フィールドを変更したときに、他のページに移動することなく、同じページで url クエリパラメータを変更したいので、次のようにしています。

this.$router.replace({ query: { q1: "q1" } })

しかし、これではページが更新され、y位置が0に設定され、つまりページの一番上にスクロールされます。これはURLクエリパラメータを設定する正しい方法なのでしょうか、それとももっと良い方法があるのでしょうか。

編集しました。

以下は私のルーターコードです。

export default new Router({
  mode: 'history',
  scrollBehavior: (to, from, savedPosition)  => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },
  routes: [
    ....... 
    { path: '/user/:id', component: UserView },
  ]
})

解決方法は？

docsにある例です。

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

参考 https://router.vuejs.org/en/essentials/navigation.html

それらのドキュメントに記載されているように router.replace は次のように動作します。 router.push

ということで、問題のサンプルコードでは正しくできているようですね。しかし、私はあなたがどちらかを含める必要があると思います name または path パラメータを使用することで、ルーターがナビゲートするためのルートを確保することができます。ルーターが何らかのルートを持つように name または path ということで、あまり意味がないように見えます。

これが今の私の理解です。

• query はルータのオプションで、コンポーネントがビューを構築するための追加情報です。
• name または path は必須です - どのコンポーネントを <router-view> .

あなたのサンプルコードに欠けているのは、この点かもしれませんね。

EDIT: コメントの後に詳細を追加

を使ってみましたか？ 名前付きルート この場合 動的なルートがあり、paramsとqueryを別々に提供する方が簡単です。

routes: [
    { name: 'user-view', path: '/user/:id', component: UserView },
    // other routes
]

を作成し、メソッドの中で

this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })

技術的には上記と違いはありません。 this.$router.replace({path: "/user/123", query:{q1: "q1"}}) しかし、ルート文字列を構成するよりも、名前付きルートで動的パラメータを供給する方が簡単です。しかし、どちらの場合でも、クエリパラメータは考慮されるべきです。どちらの場合でも、クエリパラメータの扱い方に問題は見つかりませんでした。

ルートの内部に入った後、動的なパラメータを取得するために this.$route.params.id とクエリパラメータを this.$route.query.q1 .