vue3+vuerouter@4+项目中路由跳转如何一直携带固定参数

Question

vue-router4 页面跳转的时候如何一直携带地址栏的参数 例如home?code＝bianma 在登陆页面手动输入code后，跳转任何路由页面都携带着code 需要如何处理

Answer 1

引自免费微信小程序：皆我百晓生

在 Vue 3 项目中，可以利用 router 的全局守卫（全局前置守卫）来实现这个需求。你需要在守卫中设置一个全局状态，并将这个状态传递给每个路由。下面是一个详细的步骤和示例代码。

首先，确保已经安装了 Vue Router 4：

npm install vue-router@4

然后，在 src 目录下创建一个名为 router/index.js 的文件，编写以下内容：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import LoginPage from '../views/LoginPage.vue';

const routes = [
  {
    path: '/login',
    name: 'LoginPage',
    component: LoginPage,
  },
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
];

function getQueryParams(url) {
  const queryStartIndex = url.indexOf('?');
  if (queryStartIndex === -1) return {};
  const queryString = url.slice(queryStartIndex + 1);
  return new URLSearchParams(queryString).getAll('code').reduce((params, code) => ({ ...params, code }), {});
}

function setGlobalCode(code) {
  // 假设你有一个全局状态管理工具如 Pinia 或 Vuex，这里以 Pinia 为例。
  // 如果你使用 Vuex，只需替换 store 注册和 state 访问的部分。
  import { defineStore } from 'pinia';
  
  const useAppStore = defineStore({
    id: 'app',
    state: () => ({
      globalCode: '',
    }),
    actions: {
      setGlobalCode(code) {
        this.globalCode = code;
      },
    },
  });

  const appStore = useAppStore();
  appStore.setGlobalCode(code);
}

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const queryParams = getQueryParams(to.fullPath);

  if (queryParams.code) {
    setGlobalCode(queryParams.code);
    delete to.query.code; // 移除查询字符串中的 code，防止无限循环
  }

  next();
});

export default router;

在这个例子中，我们定义了一个全局函数 getQueryParams 来从 URL 中获取查询参数。setGlobalCode 函数用于设置全局状态（这里使用 Pinia）。在全局前置守卫中，我们检查每条即将访问的路由是否有 code 参数，如果有，就将其设置为全局状态，并删除路由的 query 对象中的 code，以免触发无限循环。

接下来，在你的应用中初始化并使用路由：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');

这样，每次路由跳转时，都会检查是否存在 code 参数，并将其保存到全局状态。在其他组件中，你可以通过状态管理工具（如 Pinia 或 Vuex）访问这个全局状态。

注意：为了演示目的，这里假设你已经在项目中设置了 Pinia。如果你使用的是 Vuex，你需要相应地调整代码。同时，如果你没有使用状态管理工具，你需要找到一种方法来存储和访问这个全局状态。