Vue 中如何在路由前添加全局参数

在 Vue 开发中，很多时候我们需要在路由跳转之前添加全局参数，这对于传递一些通用信息非常有用，比如用户身份验证信息、当前应用的一些全局配置参数等。接下来就详细探讨一下在 Vue 里实现这一功能的方法。

首先要了解的是 Vue Router 的导航守卫。导航守卫是 Vue Router 提供的一种机制，用于在路由切换过程中进行一些操作，这正是我们添加全局参数的关键所在。

在全局守卫 beforeEach 中可以实现这一需求。打开项目中的 router.js 文件，找到 Vue Router 的实例化代码部分。假设我们有一个需要在所有路由跳转前添加的参数，例如当前登录用户的 ID。

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
});

router.beforeEach((to, from, next) => {
  // 获取全局参数，这里假设从本地存储中获取用户 ID
  const userId = localStorage.getItem('userId');
  // 将参数添加到路由对象中
  to.params.userId = userId;
  next();
});

export default router;

在上述代码中，beforeEach 接收三个参数：to 表示即将要进入的目标路由对象，from 表示当前导航正要离开的路由，next 函数用于控制导航的流程。

我们通过 localStorage.getItem('userId') 获取用户 ID，然后将其添加到 to.params 中。这样，在后续的路由组件中就可以通过 this.$route.params.userId 来访问这个全局参数了。

另外，如果参数是一个对象，需要注意传递时的格式问题。可以将对象进行 JSON 序列化，在接收端再进行反序列化。

在 Vue 中通过合理利用导航守卫，尤其是 beforeEach 全局守卫，能够轻松地在路由前添加全局参数，为应用的数据传递和状态管理提供了便利，有助于构建更加灵活和高效的应用程序。掌握这一技巧，对于提升 Vue 开发的效率和质量具有重要意义。