双击丢失查询字符串

Posted 2023-02-16

【中文标题】双击丢失查询字符串

【英文标题】：Losing querystring on double click

【发布时间】：2021-12-23 07:59:41

【问题描述】：

我通过反向代理服务器进入我的网站，该服务器将令牌传递给我的网站。我希望每次去不同的路线时都能够将该令牌强制到查询字符串上，并且我希望能够做到这一点，而无需将查询字符串放在我可能拥有的任何按钮的每个“to”上。这样，如果我的用户重新加载页面，他们就不会丢失令牌。

我试图在我的 default.vue 页面中执行此操作，以便无论我在哪个页面上，它都会将查询字符串推送到路由中。我面临的问题是，当用户单击按钮将他们带到路线时，这很有效，但是当双击按钮时，查询字符串不会被推送到路线上。

这是我的 default.vue 和一个页面更改按钮的片段。

....default.vue.....

  <template>
    <v-app>
    <banner :text="My Banner Text"/>
    <v-container fluid px-0 py-0>
     <v-main>
      <nuxt />
     <v-main>
    </v-container>
    </v-app>
    </template>
    
    <script>
      import banner from '@/components/layouts/default/banner'
      export default 
       components: 
         banner
        , 
    data() => 
      return 
        landingRoute: null,
      
     , 
    async fetch()
     if(this.isEmpty(this.$route.query))
      const landingkey = this.landingRoute
      this.$router.push(name: this.$router.name, query: info: landingKey)
    ,
    watch:
      '$route.query': '$fetch'
    ,
    mounted()
    this.landingRoute = this.$route.query.info
    , 
    methods: 
         isEmpty(json)
            return Object.keys(json).length === 0
         
    
 
    </script>

...... mainNav.vue .......

这是相关的部分

<v-btn
   to="/request"
><span>Request</span>
</v-btn>

【问题讨论】：

不确定整个上下文以及它是否真的相关，但您的问题主要是“当按钮被双击时，我的路由没有更新，而单击一次时它正在工作”，对吗？如果您查看 Vuetify 的文档（我假设您正在使用此文档）：vuetifyjs.com/en/api/v-btn/#props 您可以看到传递 to 属性实际上是将其转换为路由器链接，因此双击可能不起作用。您是否检查了您的 Vue 开发工具以实际看到那里发出的所有事件？另外，您在使用@click时是否尝试过常规方法？

路由会随着我的页面更改而更改，但是双击时的路由不会在我的异步获取方法中将查询字符串推送到它上面。如果这是 Vuetify 的问题，我可以实施哪种解决方法？

就我的 devtools 中的事件而言，我看到了一次点击、3 个路由更改事件，然后是单独的点击。在我的路由更改事件中，我的有效负载是一个数组，具有“/request”的一个是完整路径，一个具有“/?info=xyz”作为完整路径的数组

同样在这里，您可能需要添加a debounce 以不向您的实际事件发送垃圾邮件，但只发出一个事件。老实说，我什至没有看到双击的用例。是更多的错误还是更多的功能？

这是一个错误，当我单击查询参数时，会添加，当我双击时不会。据我所知，这与您提到的 vuetify 在 to= 上的行为方式有关。另外我不熟悉 debounce，debounce 的目的是什么？

【参考方案1】：

我认为你可以使用路由器中间件来处理这个问题，正如nuxt document 中所解释的那样 在这种情况下，在您的 nuxt.config.js 文件中，您将中间件属性添加到您的路由器配置中：

router: 
    // other configs
    middleware: ['landingKey']

那么你需要在你的项目根目录中创建middleware 目录。 在此目录中创建 landingKey.js 文件，其中包含：

export default function ( route, redirect, store ) 
    // saving key to store
    if (!store.state.landingKey) 
        store.commit('saveLandingKey', route.query.info)
    
    // adding info to query if it doesnt exist
    if (!route.query || (route.query && !route.query.info)) 
        return redirect(name: route.name, query: ...route.query, info: store.state.landingKey)
    

使用此解决方案，您无需每次都传递landingKey，并且如果路线没有landingKey，它也会重定向。 这一切都发生在安装组件之前。 此外，如果您需要在特定页面而不是全局使用此中间件，您只需在页面文件中使用middleware: ['landingKey']。

如果你不想使用 vuex，你也可以使用cookie-universal-nuxt。所以在这种情况下，你必须这样做：

export default function ( route, redirect, app ) 
    if (!app.$cookies.get('landing-key')) 
        app.$cookies.set('landing-key', route.query.info, 
            path: '/',
            maxAge: 60 * 60 * 24 * 7
        )
    
    // adding info to query if it doesnt exist
    if (!route.query || (route.query && !route.query.info)) 
        return redirect(name: route.name, query: ...route.query, info: app.$cookies.get('landing-key'))
    

【讨论】：

是的！这正是我一直在寻找的。我仍然习惯了 Vue 和 Nuxt 之间的差异，我知道我应该使用中间件，只是我不知道重定向。谢谢。

欢迎您@Jamie，我很高兴我能提供帮助。是的，每次我深入了解它时，nuxt 都会让我感到惊讶。它有很多实用的功能。

最后一个问题。在我的 default.vue 页面中，我放置了一个异步 created() 方法，该方法对我的商店进行调度以从我们的一个 api 获取一些数据，然后我使用该数据的一个特定部分将其发送到其他“页面" 需要它来显示或调用其他 API。我在 default.vue 页面中执行此操作，因为我只想进行一次调用，而不是在几个不同的页面中执行此操作。但是，我在这里实施的更改破坏了我的 $nuxt.$emit 方法，因为它们仅在我第一次访问该站点时才被调用，而不是在任何重定向上。

将我从 default.vue 创建的异步移动到 index.vue 解决了发出的问题

我知道你解决了这个问题，但我迟到了，但还有其他方法可以处理这个问题，我想告诉你了解它们。据我了解，您想从服务器获取所有页面之间通用的一些静态数据。所以一种方法可能是在您的 vuex 操作中使用 nuxtServerInit 并在那里调用 api。另一种方法是从您的布局文件中调用 api 并通过 <Nuxt /> 上的 props 传递它。我想你试过后者。另外，如果你只在 index.vue 页面上调用该 api，那么其他页面会做什么？

【参考方案2】：

您实际共享的代码 sn-p 非常混乱，有很多错误。经过一番 ESlint + Prettier 之后，就是这样的结果。试一试，它可以工作。

/layouts/default.vue

<template>
  <v-app>
    <banner text="My Banner Text" />
    <v-container class="fluid px-0 py-0">
      <v-main>
        <Nuxt />
      </v-main>
    </v-container>
  </v-app>
</template>

<script>
import banner from '@/components/layouts/default/banner'

export default 
  components: 
    banner,
  ,
  data() 
    return 
      landingRoute: null,
    
  ,
  fetch() 
    if (this.isEmpty(this.$route.query)) 
      const landingKey = this.landingRoute
      this.$router.push(
        name: this.$router.name,
        query:  info: landingKey ,
      )
    
  ,
  watch: 
    '$route.query': '$fetch',
  ,
  mounted() 
    this.landingRoute = this.$route.query.info
  ,
  methods: 
    isEmpty(json) 
      return Object.keys(json).length === 0
    ,
  ,

</script>

然后，正如我告诉您的 in my comment，尝试使用 Vue 开发工具同时检查事件和状态。缩小您的问题范围。

我发现代码本身很奇怪，但问题可能来自这样一个事实，即您确实有一个用于设置 landingRoute 的 mounted，但实际布局并未重新安装 AFAIR。

是的，请按照以下步骤操作，如果您仍有问题，我会尽力帮助您！

【讨论】：

很抱歉，我试图从未连接网络的工作 PC 上编写它，这是一个内部非面向公众的应用程序，所以。这不是我电脑上的代码本身的问题。我确实将 this.$route.query.info 移到了 fetch 中，重新安装了 this.landingRoute 并一起摆脱了 mount ，这似乎没有帮助。