如何在Nuxt.js中通过this.$router或this.$route获取上一路由

访问上一路由数据的实现方式 #

Vue Router本身没有在this.$router或this.$route中内置上一路由的直接访问属性，你可以通过以下两种方案拿到和DevTools中结构一致的上一路由数据：

方案1：全局存储上一路由（全组件可访问） #

在路由配置文件中注册全局前置守卫，将上一路由信息挂载到路由实例上，所有组件都可以直接读取：

// router/index.js 路由配置文件
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的路由配置 */]
})

// 全局守卫存储上一路由
let prevRoute = null
router.beforeEach((to, from, next) => {
  prevRoute = from
  // 挂载到路由实例上
  router.prevRoute = prevRoute
  next()
})

export default router

之后在任意组件中直接用this.$router.prevRoute即可拿到完整的上一路由数据，包含path、query、params、meta等所有你在DevTools中看到的属性。

方案2：单个组件内获取上一路由 #

如果你只需要在某个特定组件内拿到上一路由信息，直接使用组件内路由守卫即可：

export default {
  data() {
    return {
      prevRoute: null
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 将上一路由数据存到当前组件的data中
      vm.prevRoute = from
    })
  }
}

你在DevTools中看到的路由数据参考截图：

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