如何以编程方式在组件内进行路由 - Vue Router

Question

我有一个运行 Vue 3 和 vue-router 4 的 Quasar 应用程序

我的路线已设置完毕，并且在从组件模板导航时工作得很好

<router-link to="/route">Go to route</router-link>

不过，我希望能够通过我的方法访问路由器和路由。根据文档，我应该能够以某种方式访问​​路由器对象，this.$router，或路由器，或其他方式......但我似乎无法获得访问权限

我的整个单个文件组件看起来像

  <template>
    <q-page>
      <q-card>
        <q-form @submit="handleSubmit()" >
          <q-input v-model="param" />
          <q-btn label="submit" type="submit" />
        </q-form>
        <router-link to="/">Go to Foo</router-link> <!-- this works great -->
      </q-card>
    </q-page>
  </template>

  <script lang="ts">
  import { ref } from 'vue'

  export default {
    setup () {
      const param = ref(null);
      return { param }
    },
    methods: {
      async handleSubmit () {
         // do stuff
         // route somewhere
      }
    }
  }
  </script>

如何从我的handleSubmit方法访问vue路由器？

this.$route和this.$router是未定义的，据我了解，vue 3 和 sfc 这种模式不适用。例如，对于我的商店，我需要使用 vuexmapState和mapActions

Answer 1

Options API 的类型推断需要使用包装器声明组件defineComponent()：

\n

\n

为了让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用defineComponent全局方法定义组件：

\n

import { defineComponent } from \'vue\'\n\nconst Component = defineComponent({\n  // type inference enabled\n})\n

\n

如果您使用单文件组件，那么通常会写为：

\n

<script lang="ts">\nimport { defineComponent } from \'vue\'\n\nexport default defineComponent({\n  // type inference enabled\n})\n</script>\n

\n

\n

所以你的组件应该类似于这样：

\n

<script lang="ts">\nimport { defineComponent } from \'vue\'\n                    \nexport default defineComponent({\n  methods: {\n    async handleSubmit () {\n      // \xe2\x9c\x85\n      this.$router.push(\'/\')\n    }\n  }\n})\n</script>\n

\n

useRouter()或者，您可以在 Composition API 中使用：

\n

<script lang="ts">\nimport { ref, defineComponent } from \'vue\'\nimport { useRouter } from \'vue-router\'\n\nexport default defineComponent({\n  setup() {\n    const router = useRouter()\n    const handleSubmit = async () => {\n      router.push(\'/\')\n    }\n\n    return { handleSubmit }\n  }\n})\n</script>\n

\n