VueでURLパラメータを削除する方法

Vue.js は、インタラクティブな Web アプリケーションやシングルページ アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue.js アプリケーションを開発する場合、多くの場合、URL パラメーターを処理する必要があります。

Vue.js では、$route オブジェクトを使用して、現在の URL のパラメーターなど、現在のルートに関する情報を取得できます。ただし、場合によっては URL のパラメータを削除する必要があるため、この記事では Vue.js で URL パラメータを削除する方法を紹介します。

URL パラメーターの取得

Vue.js では、$route オブジェクトを使用して、URL 内のパラメーターを含む現在のルートに関する情報を取得できます。 $route オブジェクトには多くの属性が含まれており、その中で params 属性にはルーティング パラメーターが含まれています。

this.$route.params.id // 获取名为"id"的参数值

たとえば、次のルートでは:

path: '/users/:id'

次のコードを使用して、「id」という名前のパラメータ値を取得できます:

this.$route.params.id // 获取名为"id"的参数值

URL パラメータを削除

場合によっては、現在の URL から 1 つ以上のパラメータを削除する必要があります。その目標を達成するための方法をいくつか紹介します。

方法 1: $router.replace メソッドを使用する

$router.replace メソッドを使用して、URL 内のパラメーターを削除できます。このメソッドは、新しい URL に移動するために使用され、新しい履歴レコードは生成されません。

this.$router.replace({ path: '/users', query: { page: null } })

上記のコードでは、null を使用して「page」という名前のパラメータをクリアします。これにより、パラメータを渡さずに /users ルートに移動します。

方法 2: $router.push メソッドを使用する

$router.push メソッドは $router.replace メソッドに似ていますが、新しい履歴レコードが生成されます。

$router.push メソッドを使用すると、特定のパラメーターを指定せずに新しい URL を生成できます。

this.$router.push({ path: '/users', query: { page: null } })

上記のコードでは、null を使用して「page」という名前のパラメータをクリアします。これにより、パラメータを渡さずに /users ルートに移動します。

方法 3: $route.replace メソッドを使用する

$route.replace メソッドは、新しい URL に移動するために使用されますが、新しい履歴レコードは生成されません。

this.$route.replace({ path: '/users', query: { page: null } })

上記のコードでは、null を使用して「page」という名前のパラメータをクリアします。これにより、パラメータを渡さずに /users ルートに移動します。

方法 4: $route.query を使用する

$route.query を使用して、現在の URL のパラメーターにアクセスし、そこからパラメーターを削除できます。

const query = Object.assign({}, this.$route.query)
delete query.page
this.$router.replace({ path: '/users', query: query })

上記のコードでは、Object.assign メソッドを使用して $route.query プロパティのコピーを作成します。次に、delete メソッドを使用して「page」という名前のパラメータを削除し、$router.replace メソッドを使用して更新された URL をブラウザに移動します。

結論

Vue.js では、URL からパラメータを削除するために使用できる方法がいくつかあります。これらのメソッドには、$router.replace、$router.push、$route.replace、$route.query が含まれます。実際のニーズに応じて適切な方法を選択すると、URL パラメーターをより適切に処理できます。

以上がVueでURLパラメータを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。