此容器隐藏了 “this“ 的外部值。

爱学习的girl

已于 2022-05-10 13:48:06 修改

阅读量2.3k

点赞数

分类专栏： vue 文章标签： vue

于 2022-04-21 17:18:21 首次发布

本文链接：https://blog.csdn.net/Qyh1207/article/details/124326869

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在Vue3应用中遇到使用`this.$router.push()`导致的问题，原因是`setup`函数不直接访问`this`。解决方法是通过引入`useRouter`和`useRoute`来访问路由。示例代码展示了如何在`setup`中正确实现路由跳转，避免了`this`的使用。

摘要由CSDN通过智能技术生成

在使用vue3时，发现this.$router.push(‘/’)出现问题，提示此容器隐藏了 “this” 的外部值。

百度了许多，都没发现解决方法，突然想到去官网看看，发现解决方法。
主要的问题点是：

在 setup 中访问路由和当前路由

因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this. $r o u t e r 或 t h i s .$ route。作为替代，我们使用 useRouter 函数：

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }
  },
}