watch( () => router.currentRoute, (to, from) => { // to: 当前路由对象 // from: 上一个路由对象 console.log("路由变化", to, from); } )没有效果
时间: 2024-03-02 10:49:50 浏览: 19
如果`watch`函数无法监听路由变化,可能是因为`currentRoute`对象是一个响应式对象,需要使用`.value`属性才能获取到其值。因此,可以将`watch`函数修改为如下形式:
```javascript
import { watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
export default {
setup() {
let router = null
onMounted(() => {
router = useRouter()
watch(() => router.currentRoute.value, (to, from) => {
// to: 当前路由对象
// from: 上一个路由对象
console.log('路由变化', to, from)
})
})
return {}
}
}
```
在上述代码中,我们使用`watch`函数监听`currentRoute.value`属性的变化。这样,当路由发生变化时,`watch`函数就会执行回调函数了。
相关问题
watch: { $route: { immediate: true, handler (route) { this.updateCurrentPath(route.path) this.list = route.matched.map(item => { return { name: item.name, label: this.routesMap.get(item.name) } }) } } }改用setup和ts编写这个函数
好的,以下是使用 `setup` 和 TypeScript 重写这个函数的示例代码:
```typescript
import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue'
import { RouteLocationNormalized } from 'vue-router'
export default defineComponent({
setup() {
const currentPath = ref('')
const routesMap = new Map([
['home', '首页'],
['about', '关于'],
['contact', '联系我们'],
])
const list = ref<Array<{ name: string; label: string }>>([])
const updateCurrentPath = (path: string) => {
currentPath.value = path
}
const updateList = (route: RouteLocationNormalized) => {
list.value = route.matched.map(item => ({
name: item.name as string,
label: routesMap.get(item.name as string) as string,
}))
}
onMounted(() => {
updateCurrentPath(window.location.pathname)
updateList({ ...$route })
})
onBeforeUnmount(() => {
// do cleanup work here
})
return {
currentPath,
list,
}
},
})
```
需要注意的是,在 `options API` 中,我们可以直接使用 `$route` 对象来监听路由变化,而在 `setup` 函数中,我们需要通过 `useRoute` 函数来获取 `$route` 对象。此外,在 `setup` 函数中,我们还需要手动处理组件的生命周期钩子函数。
报错index.vue?t=1685687888663:65 Uncaught (in promise) ReferenceError: router is not defined
在Vue3中,使用`useRouter`函数获取路由实例时,需要确保路由实例已经被创建。如果在路由实例未创建时就使用`useRouter`函数,就会出现`router is not defined`的错误。为了避免这个错误,可以在组件挂载后再使用`useRouter`函数。具体实现如下:
```javascript
import { watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
export default {
setup() {
let router = null
onMounted(() => {
router = useRouter()
watch(() => router.currentRoute, (to, from) => {
// to: 当前路由对象
// from: 上一个路由对象
console.log('路由变化', to, from)
})
})
return {}
}
}
```
在上述代码中,我们先将`router`设为`null`,在组件挂载后再使用`useRouter`函数获取路由实例,并将其赋值给`router`。之后,我们就可以在`watch`函数中监听路由变化了。这样,就可以避免`router is not defined`的错误了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)