在 VUE 3 中检查 URL 中提供的参数

软件技术 前端
,
1

vue 3 watch two properties from url

备注

询问上面这个问题的原因是想进行页面的复用。

当一个页面提供多个参数进行访问的时候，希望页面进行刷新。

但 VUE3 中的 watch 方法放在了 setup 中，所有的加载都在后面方法的前面，所以就没有办法直接调用后面的方法了。

2

Okay, let’s try to find some information on watching two properties from the URL in a Vue 3 application.

Search

Found 0 results for 'vue 3 watch properties from url status:public'

Okay, let me try a slightly broader search:

Search

Found 0 results for 'vue 3 watch properties status:public'

Hmm, I couldn’t find any direct topics about watching Vue 3 properties from the URL. Let me try to provide a general solution.

In Vue 3, you can use the watch function to monitor changes to reactive data, including properties that come from the URL. Here’s an example of how you could watch two properties from the URL:

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const myParam1 = ref(route.query.param1)
const myParam2 = ref(route.query.param2)

watch(
  () => [route.query.param1, route.query.param2],
  ([newParam1, newParam2]) => {
    myParam1.value = newParam1
    myParam2.value = newParam2
  }
)
</script>

<template>
  <div>
    <p>Param1: {{ myParam1 }}</p>
    <p>Param2: {{ myParam2 }}</p>
  </div>
</template>

In this example, we use the useRoute() function from the Vue Router library to access the current route object. We then create two ref variables, myParam1 and myParam2, and initialize them with the param1 and param2 query parameters from the URL.

Next, we use the watch function to monitor changes to the param1 and param2 properties of the route.query object. Whenever these properties change, the callback function is called, and we update the corresponding myParam1 and myParam2 ref variables.

This way, your Vue 3 component can reactively display and respond to changes in the URL parameters.

Let me know if this helps explain how to watch properties from the URL in Vue 3!

1 Like
4

vue 3 watch two properties from url

5

In Vue 3, you can use the watch function to observe changes to reactive data properties, including properties from the URL. If you are using Vue Router, you can watch for changes in the route parameters or query parameters directly. Below is an example of how you can watch two properties from the URL:

First, make sure you have Vue Router set up. Then, in your Vue component:

<script setup>
import { watch, ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

// Assuming you are watching query parameters named `param1` and `param2`
watch(
  () => [route.query.param1, route.query.param2],
  ([newParam1, newParam2], [oldParam1, oldParam2]) => {
    console.log(`param1 changed from ${oldParam1} to ${newParam1}`);
    console.log(`param2 changed from ${oldParam2} to ${newParam2}`);
  }
);
</script>

Explanation:

  • useRoute: This Vue Router composition function gives you access to the current route object. It’s important to use the setup script or the Options API created()/mounted() lifecycle hooks to access the route.

  • watch: This composition API function is used to watch the reactive properties. It takes two arguments:

    • A source function that returns the values you want to watch. In this case, an array of the route query parameters.
    • A callback function that runs whenever the watched properties change. It receives the new and old values.

This setup allows you to track changes in the URL’s specified query parameters and perform any reactive logic in response to those changes. If your parameters are part of route.params instead of route.query, simply adjust the source to () => [route.params.param1, route.params.param2].

1 Like