双击丢失查询字符串

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

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

Answer 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。

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