将Vue查询参数从当前路由传递到路由器链路

npm install vue-router

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

<template>
  <div>
    <!-- 显示查询参数 -->
    <p>查询参数: {{ $route.query }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在组件加载时获取查询参数
    console.log(this.$route.query);
  }
}
</script>

<template>
  <div>
    <!-- 使用<router-link>传递查询参数 -->
    <router-link :to="{ path: '/other', query: { param1: 'value1', param2: 'value2' }}">跳转到其他路由</router-link>
  </div>
</template>

<script>
export default {
  methods: {
    redirectToOtherRoute() {
      // 使用router.push()方法传递查询参数
      this.$router.push({ path: '/other', query: { param1: 'value1', param2: 'value2' }});
    }
  }
}
</script>