解决Vue.js项目js文件内获取路由参数和跳转问题的终极方案！

2023-03-08 18:14:11

在 Vue.js 中巧妙运用 this.$route，驾驭路由如鱼得水

问题引入：this.$route 报错的根源

在 Vue.js 项目中，当您在 js 文件内直接调用 this.$route 获取路由参数或跳转时，可能遇到意想不到的报错。这是因为 this.$route 并非全局可用，仅在组件内部有效。因此，在 js 文件中需要采取其他方式访问路由信息。

第一招：巧用 Vue Router 的 API，玩转路由

Vue Router 提供了丰富的 API，助力您轻松访问和操作路由信息。让我们一探究竟：

获取当前路由参数：

使用 $route.params 对象，您可以轻松获取当前路由的动态参数。就像访问对象属性一样，即可获得参数值。

const { id } = this.$route.params

跳转到指定路由：

通过调用 $router.push() 方法，您可以轻松跳转到指定的路由。只需传入目标路由的路径或名称即可。

this.$router.push('/about')

第二招：在 js 文件中注入路由实例，畅通无阻

如果您需要在 js 文件中使用 this.$route，可以通过以下步骤注入路由实例：

在 main.js 文件中，引入 Vue Router 并创建路由实例。
在需要使用路由的 js 文件中，导入路由实例。
通过 Vue.prototype.$router = router 的方式，将路由实例注入到 Vue 原型中。
现在，您可以在 js 文件中使用 this.$route 了！

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
const router = new VueRouter(...)
new Vue({ router })

// js 文件
import Vue from 'vue'
Vue.prototype.$router = router

结语：灵活运用 Vue Router，让路由操控如鱼得水

掌握了这些技巧，您就能在 Vue.js 项目中灵活运用路由，让路由操控如鱼得水。无论是获取路由参数，还是跳转到指定路由，都能轻松搞定！

实例演示：一步一步带您玩转路由

为了让您更好地理解如何使用 Vue Router 的 API 和注入路由实例，我们提供了一个实例演示：

// main.js
const router = new VueRouter(...)
const app = new Vue({ router })

// js 文件
import Vue from 'vue'
Vue.prototype.$router = router

export default {
  mounted() {
    console.log(this.$route.params) // 输出当前路由的参数
    this.$router.push('/about') // 跳转到 /about 路由
  }
}