Vue3 setup中调用this.$router报Cannot read properties of undefined (reading 'router')怎么办

问题根源 #

你用的是Vue3的组合式API（setup语法），setup执行阶段组件实例还未初始化，根本不存在this对象，不管你怎么把this赋值给self，拿到的都是undefined，自然读不到$router属性。你参考的是选项式API的this用法，不适用组合式API场景。

解决方法 #

1. 首先从vue-router中导入组合式API useRouter：

import { useRouter } from 'vue-router'

2. 在setup函数内初始化router实例：

setup(props, { emit }) {
  // 新增这一行初始化路由实例
  const router = useRouter()
  // 原有其他代码保持不变
  const blankData = { 
    customer: '',
    template: '',
    // 剩余属性省略和原有一致
  }
  // ...其他变量声明

3. 把跳转代码里的this.$router.push或者self.$router.push替换为router.push：

const onSubmit = () => {
  store.dispatch('app-user/addUser', userData.value)
    .then(
      response => {
        if (response.status === 1) {
          // 直接调用router实例的push方法即可
          router.push({ name: 'edit-user', params: { id: 10 } })
        }
        toast({
          component: ToastificationContent,
          props: {
            title: response.message,
            icon: response.toastIcon,
            variant: response.toastVariant,
          },
        })
      },
      error => {
        console.log(error)
      },
    )
}

额外注意事项 #

• 确保你的路由配置中已经注册了name: 'edit-user'的路由规则，且路由路径配置了id参数占位（比如path: '/user/edit/:id'），否则跳转后可能无法正常获取id参数。
• 如果你用的是<script setup>语法，用法完全一致，直接导入useRouter初始化即可。

内容的提问来源于stack exchange，提问作者lumos