vue3里TypeError: Cannot read property '$route' of undefined错

在Vue3中，当你在组件中使用`$route`时，可能会出现`TypeError: Cannot read property '$route' of undefined`的错误。这是因为在Vue3中，`$route`和`$router`已经从组件实例中移除，需要使用`useRoute`和`useRouter`函数来代替。

以下是解决该错误的方法：

1. 导入`useRoute`函数和`useRouter`函数：

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

2. 在组件中使用`useRoute`和`useRouter`函数：

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

    // 使用route和router对象
    // ...
  }
}

注意：在Vue3中，组件的选项中不再支持`$route`和`$router`属性，因此不能在`created`或`mounted`等生命周期钩子中使用它们。

相关问题

uniapp list.vue:60 Uncaught (in promise) TypeError: Cannot read property '$route' of undefined

这个错误的原因是在 list.vue 的第 60 行代码中，尝试访问一个未定义的对象的 $route 属性。可能是因为你没有正确地引入或使用 vue-router。请检查以下几个方面：

1. 确保已经正确地安装了 vue-router 并在 main.js 中导入和使用了它。
2. 确认你的组件中已经正确地注册了 vue-router。
3. 确认你的组件中已经正确地使用了 $route 对象，可以在组件中使用 $route.path 或 $route.params 等属性。

如果以上检查都没有解决问题，可以尝试在 list.vue 中添加一个生命周期钩子函数 created()，并在其中打印出 $route 对象，以便检查是否能够正确地访问它。

可是出现 [Vue warn]: Error in data(): "TypeError: Cannot read property 'getItem' of undefined"和TypeError: Cannot read property 'getItem' of undefined

这个错误是因为在组件加载时，尝试读取`localStorage`的时候`localStorage`对象未定义。这可能是因为代码运行在某些环境中，如Node.js，它没有直接访问`localStorage`对象。

如果你在Node.js环境中运行代码，`localStorage`对象是不可用的。在浏览器环境中，`localStorage`是全局对象，可以直接访问。

如果你想在Node.js环境中使用类似功能的本地存储，你可以考虑使用第三方库，如`node-localstorage`或`node-persist`。

以下是使用`node-localstorage`库的示例代码：

npm install node-localstorage

import { LocalStorage } from 'node-localstorage';

const localStorage = new LocalStorage('./localstorage');

export default {
  data() {
    return {
      mineFormData: {
        name: localStorage.getItem('name') || '',
      },
      mineRules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: '姓名不能为空',
            },
          ],
        },
      },
    };
  },
  methods: {
    save(ref) {
      this.$refs[ref].validate().then(res => {
        console.log('success', res);
        localStorage.setItem('name', this.mineFormData.name);
        uni.showToast({
          title: '保存成功',
        });
      }).catch(err => {
        console.log('err', err);
      });
    },
  },
};

这样，在Node.js环境中，使用`node-localstorage`库代替浏览器环境中的`localStorage`对象来实现类似的本地存储功能。请确保正确安装了`node-localstorage`库并按照上述示例代码进行使用。