vue.js 从内部设置调用访问路由器(混合组合/选项API)

zengzsys 于 2023-01-26 发布在 Vue.js

关注(0)|答案(1)|浏览(96)

我们正在将我们的Vue2应用程序迁移到Vue3，这样我们就有了选项API和组合API。大多数组合API都工作得很好。但是...
我无法在组合API方法中进行路由，因为在升级到Vue 3和Vue Router 4之前，Vue Router组合（允许您访问setup()方法中的路由器）不可用。因此，为了访问全局注册的路由器插件，我们在组件上定义了一个methods块，用于处理路由：

methods: {
   changeRoute() {
     this.$router.push({ name: 'home' })
  }
}

我想从设置块中调用this.changeRoute()作为一个函数。这样我就可以用组合API编写组件，而只保留Vue2风格的路由方法。这可能吗？
我知道在单个组件中混合选项API和组合API并不理想，但这确实是我需要处理的唯一情况。

vue.js

来源：https://stackoverflow.com/questions/75212554/accessing-router-from-inside-setup-call-mixing-composition-options-apis

1条答案

按热度按时间

bnl4lu3b1#

最后按照Tolbxela的建议，在组件的根级别上发布了路由器本身的注入：

import { createApp } from 'vue'
const router = createRouter()

const app = createApp({
  /* other root component options */
  setup () {
    provide('router', router)
})

然后能够通过inject在子组件内部访问它：

export default {
  name: "MyComponent",
  setup () {
    const router = inject('router')
  }
}

赞(0）回复(0）举报 2023-01-26

我来回答

vue.js 从内部设置调用访问路由器(混合组合/选项API)

1条答案

相关问题

热门标签

最新问答