·
0 min read
The watch option support a dot-delimited path as key to watch nested values:
<script setup lang="ts">
import { watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
watch(
() => route.query.id,
(queryId) => {
console.log('Route Query ID', queryId)
}
)
</script>
The above example assumes that you are using the Composition API with TypeScript.
If you are using Options API the code looks like this:
<script>
export default {
watch: {
// Note: only simple paths. Expressions are not supported.
'$route.query.id'(queryId) {
console.log('Route Query ID', queryId)
},
},
}
</script>
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Use Vuex in Vue Router Navigation Guards
It's possible to use Vuex state to determine if a user is allowed to visit certain Vue Router routes.
Vue Tip: Use v-bind to Pass Multiple Props to Components
Instead of passing each property individually to a component, you can bind an object to it.