变量通过params后，监视函数未启动

Question

当我将params从下面的第一个代码块传递到第二个代码块时，我无法启动watch函数。我正在获取参数，因为我可以在刷新时注册它，但它没有被观看。

第一块

<template>
<router-link :to="{ name: 'page', params: { mus: mus } }">
<q-btn
filled
label="Get"
/></router-link>
</template>
<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
name: "otherName",
setup() {

let mus = ref("variable to pass");

return {
mus
};
},
};
</script>

第二块：这是接收参数的代码：

<script>
import { ref, watch} from "vue";
import { useRoute } from "vue-router";
export default {
name: "page",
setup(props, { emit }) {

const route = useRoute();

watch(
() => route.params.mus,
() => {
if (route.params.mus != undefined) {

//do things
}
}
);
return {
};
},

}；

编辑：我收到一个错误："额外的非道具属性(mus(已传递给组件，但由于组件呈现片段或文本根节点，因此无法自动继承"引用这个答案还没有奏效——页面被div元素包裹。

Answer 1

请注意，watch是lazy，也就是说，它只有在检测到更改时才会触发，并且不会立即用初始值触发。

如果您希望监视侦听器为监视属性的所有后续更改立即触发AND，则应该使用watchEffect。

watchEffect(() => {
if (route.params.mus != undefined) {
//do things
}
})

在这里，回调将立即运行。在执行过程中，它还将自动跟踪route.params.mus作为依赖项(类似于计算属性(。每当route.params.mus发生更改时，回调将再次运行。

watch与watchEffect

Answer 2

这是我的一个路由命名错误，但我的路由命名错误。我已经命名了一个主要路线，而不是组件路线。

Answer 3

你试过这样添加{ deep: true }吗：

watch(
() => route.params.mus,
() => {
if (route.params.mus != undefined) {

//do things
},
{ deep: true }
})