<template>
<div>
<div>
<nuxt-link class="test" :to="{ path: "/testNuxtLink/1" }" :key=""a""></nuxt-link>
<br />
</div>
<div>
<nuxt-link class="test" :to="{ path: "/testNuxtLink/2" }" :key=""b"">2</nuxt-link>
<br />
</div>
<div>
<nuxt-link class="test" :to="{ path: "/testNuxtLink/3" }" :key=""c"">3</nuxt-link>
</div>
<div>
<nuxt-link class="test" :to="{ path: "/testNuxtLink/4" }" :key=""d"">4</nuxt-link>
</div>
this routeParam: {{ routeParams }}
</div>
</template>
<script>
export default {
data() {
return {
routeParams: this.$route.params
};
},
watch: {
$route: {
handler: function(val, oldVal){
console.log(val.params);
Object.assign(this.routeParams, val.params)
},
//
deep: true
}
}
};
</script>when you click on the home page of 2pr 3je 4, respectively, you will get the following output
{0: "/ 2"}
testNuxtLink.vue?f05a:33 {0: "/ 2"}
testNuxtLink.vue?f05a:33 {0: "/ 3"}
testNuxtLink.vue?f05a:33 {0: "/ 4"}
testNuxtLink.vue?f05a:33 {0: "/ 4" "}
testNuxtLink.vue?f05a:33 {0:" / 4 "}
testNuxtLink.vue?f05a:33 {0:" / 1 "}
testNuxtLink.vue?f05a: 33 {0: "/ 1"}
testNuxtLink.vue?f05a:33 {0: "/ 1"}
