Nuxt 2.17中导入vue-router的useRouter为undefined，如何正确获取路由？

问题根源 #

你使用的vue-router@3.6.5是适配Vue 2的版本，本身并不提供useRouter这类组合式API函数，这就是直接从vue-router导入useRouter会得到undefined的原因。

正确获取路由的方式 #

1. 组件选项API中直接使用 #

在Vue组件的选项API里，可直接通过this.$router（路由实例）或this.$route（当前路由信息）访问：

export default {
  mounted() {
    // 打印当前路由路径
    console.log(this.$route.path)
    // 跳转至指定路由
    this.$router.push('/about')
  }
}

2. 在asyncData/fetch或Vuex中通过上下文获取 #

• 在组件的asyncData或fetch钩子中，可直接从上下文参数解构出$router：

export default {
  async asyncData({ $router }) {
    console.log('当前路由路径：', $router.currentRoute.path)
    return {}
  }
}

• 在Vuex的actions/mutations中，可通过this.$router访问路由实例：

export const actions = {
  navigateToHome({ commit }) {
    this.$router.push('/')
  }
}

3. 非组件文件中获取路由 #

在独立的工具函数或JS文件中，可通过Nuxt的全局实例获取路由：

import { nuxt } from '@nuxt/app'

const router = nuxt.$router
// 执行路由跳转
router.push('/contact')

4. 若需使用组合式API写法 #

如果想在Nuxt 2中使用组合式API风格的路由操作，需要安装@nuxt/composition-api插件：

1. 安装依赖：

npm install @nuxt/composition-api
# 或
yarn add @nuxt/composition-api

2. 在nuxt.config.js中注册插件：

export default {
  buildModules: ['@nuxt/composition-api/module']
}

3. 在组件中导入并使用插件提供的useRouter：

import { useRouter } from '@nuxt/composition-api'

export default {
  setup() {
    const router = useRouter()
    // 注意：router是响应式ref对象，需通过.value访问路由实例
    console.log(router.value.currentRoute.path)
    return { router }
  }
}

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