javascript - 如何使用 Vue-Router 在 Vue 中保存 URL 查询参数

Question

我正在使用 Vue-Router 在 Vue 中做一个项目。在我的项目中，我有一个名为“adtag”的参数，它必须位于url查询参数中，有没有简单的方法来保存这个参数，无论路由器如何运行。

例如，我有三个页面:

1. 本地主机/索引
2. 本地主机/列表
3. 本地主机/详细信息？id=11

使用 vue-router 进行页面更改 <router-link :to="{name:'Detail',query:{id:item.id}}"></router-link>

如果我打开第一页localhost/index?adtag=123使用 adtag，页面将随参数 'adtag' 发生变化

1. localhost/index?adtag=123
2. localhost/list?adtag=123
3. localhost/detail?adtag=123&id=11

Answer 1

在默认的 Vue 2.x 安装中，路由器文件位于 src/router/index.js

然后我能够检查是否需要修改请求并添加任何缺少的查询参数(修改 to var 显然没有效果)，然后调用 下一步(..新路线..).

缺点:使路由调用加倍，因为本质上它会重定向

优点:它有效，并且查询保留逻辑位于一个位置。

一个警告:在页面加载时，路由器会触发，并且“from”是一个非常空的路由(甚至不包括 URL 中的查询参数)。因此，我设置了 if 语句来验证是否需要将查询参数放置到位。

import Vue from 'vue'
import Router from 'vue-router'
// ... All your other components

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: Dashboard
    },
    // ... All your other routes
  ]
})

router.beforeEach((to, from, next) => {
  if (from.query.token && !to.query.token) {
    if (to.path === from.path) {
      // console.log('Identical routes detected')
      return // This is a no-no via the documentation, but a bug in routing to identical routes strips query params, and this prevents that
    }
    next({path: to.path, query: {token: from.query.token}})
  }

  next()
})

export default router