Nuxt 如何从 Vue 组件上下文外部访问路由器答案

【问题标题】：Nuxt How to access router from outside a Vue component contextNuxt 如何从 Vue 组件上下文外部访问路由器
【发布时间】：2022-11-02 01:39:24
【问题描述】：

在 Nuxt.js 中，我有一个导出的辅助函数，它还应该以编程方式导航路由器。

在 Vue.js 中，我通常会从“@/router”导入路由器。

我将如何将其迁移到 Nuxt？

doSomething.ts

export default function doSomething(name: string){
   console.log(`hello ${name}`);
   this.$router.push({ path: "/" }); // this.$router not defined!
}

组件.vue

import doSomething from "@/scripts/doSomething";
export default {
   mounted(){
      doSomething("name");
   }
}

【问题讨论】：

您的辅助功能在哪里？你可以访问 Nuxt 的上下文吗？
如果您的助手位于 JS/TS 文件中，而没有任何与 Vue/Nuxt 相关的内容，那么您唯一的解决方案确实是将上下文作为参数传递给函数。

标签： vue.js nuxt.js

【解决方案1】：

作为一种解决方法，我将其添加为第一个参数：

import Vue from "vue";
export default function doSomething(this: Vue, name: string){
   console.log(`hello ${name}`);
   this.$router.push({ path: "/" }); // this.$router not defined!
}

然后这样称呼它：

doSomething.call(this, name);

【讨论】：

【解决方案2】：

类型

import VueRouter from 'vue-router'
import {Route} from 'vue-router'

declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter,
    $route: Route
  }
}

然后

window.$nuxt.$router

【讨论】：