双击丢失查询字符串

Question

我通过向我的网站传递令牌的反向代理服务器进入我的网站。每次我转到不同的路线时，我都希望能够将该标记强制添加到查询字符串中，并且我希望能够做到这一点，而无需将查询字符串放在我可能拥有的任何按钮中的每个“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>

Answer 1

您实际分享的代码片段很乱，错误很多。经过一些 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>

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

我发现代码本身很奇怪，但问题可能来自于您确实有一个 mounted 用于设置 landingRoute 但实际布局不是重新 -安装 AFAIR.

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

Answer 2

我认为您可以使用路由器中间件来处理这个问题，如 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')}})
    }
}

双击丢失查询字符串

Losing querystring on double click

vue.js

vuejs2

nuxt.js