vue的前端页面的数据传输给另一个前端页面，如何用query来实现，请完整的呈现两个页面分别应该怎么做，分别标明那边是传输方那边是输入方

在Vue中，数据传输通常是通过Vuex或Vue Router来实现的。然而，如果你想通过查询字符串（query string）来实现数据传输，你可以使用Vue Router的导航守卫（navigation guard）来拦截页面跳转，并在新的页面上设置查询参数。

首先，我们需要明确哪个页面是传输方，哪个页面是输入方。一般来说，发送数据的页面可以看作是传输方，接收数据的页面可以看作是输入方。

**传输方（发送数据页面）**

在发送数据页面的Vue Router的导航守卫中，你可以拦截并修改当前的路由，将查询参数添加到URL中。具体步骤如下：

1. 在发送数据页面的组件中，使用`beforeRouteLeave`导航守卫来拦截页面的离开操作。

export default {
  beforeRouteLeave(to, from, next) {
    // 在这里设置查询参数
    let params = { data: '你想要传输的数据' }; // 你可以根据需要修改参数
    next(false).then(() => {
      // 在这里阻止导航并给出提示或者做一些其他处理
    }).catch(() => {
      // 在这里处理错误
    });
  }
}

2. 然后在页面的路由配置中，添加查询参数。例如：

import Vue from 'vue';
import Router from 'vue-router';
import InputPage from './InputPage.vue'; // 输入方页面
import { store } from './store'; // 获取Vuex store实例

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/send', // 发送数据的页面路径
      component: InputPage, // 页面组件
      beforeEnter: (to, from, next) => {
        // 在这里设置查询参数并添加到URL中
        let params = { data: '你想要传输的数据' }; // 你可以根据需要修改参数
        if (to.query && Object.keys(params).length > 0) { // 如果目标路由已经有查询参数并且有数据需要传输
          Object.assign(to.query, params); // 将新的查询参数添加到已有的查询参数中
        } else { // 如果没有查询参数或者不需要添加新的查询参数
          next(); // 直接跳转到目标路由
        }
      }
    },
    { path: '/input', component: InputPage } // 输入方页面的路径配置
  ]
});

**输入方（接收数据页面）**

在接收数据页面的组件中，你可以使用`this.$route.query`来获取查询参数。具体步骤如下：

1. 在接收数据页面的组件中，使用`created`或`mounted`钩子来获取当前路由的查询参数。例如：

export default {
  created() {
    console.log(this.$route.query); // 这里可以打印出查询参数，例如{ data: '接收到的数据' }
  }
}

这样，你就可以在发送数据页面通过查询参数将数据传输给接收数据页面了。需要注意的是，这种方式的数据传输方式并不是非常安全和可靠，因为用户可以随时更改或删除查询参数。在实际应用中，你可能需要考虑使用更安全和可靠的数据传输方式，如Ajax请求、WebSocket等。