Vue-RouterでVueでURLクエリパラメータを設定する方法

Question

入力フィールドを変更するときにクエリパラメータをVue-routerに設定しようとしていますが、他のページに移動する必要はありません。

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

をしかし、これはまた、ページを更新し、ページの最上部に、0にすなわち巻物をy位置を設定します。同じページに、私はこのようにやっています。これは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 }, 
    ] 
}) 

Answer 1

は、ドキュメントの例です：

// 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、クエリを提供することが容易である：あなたの方法で

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.query.q1としてthis.$route.params.idし、問合せのparamsとしてあなたダイナミックのparamsを取得することができます。