javascript - Vue，有没有办法在没有 URL 参数的路由之间传递数据？

Question

我正在寻找如何在两个单独的组件（不是父子组件）之间秘密传递数据，而不在我的 Vue2 应用程序中使用 URL 参数。这并不意味着我在传递秘密，而是我只是不希望用户看到它（仅出于 UI 考虑）。

我知道 Vue 有Props，但它们用于在父组件和子组件之间传递数据。就我而言，我的 URL 会改变，但我不想通过可见参数传递数据。

有人声称在这里使用没有 URL 参数的道具，但我无法重现有效的解决方案（每次都未定义）。

我还检查了这些选项，但它们都使用我们知道的可见的 URL 或查询参数。

一个丑陋的解决方案是将数据写入本地存储，然后在那里读取，但这会产生很多开销和复杂性（例如，如果我只想读取一次这些数据，等等）。

这个问题有更优雅的解决方案吗？

谢谢！

score 27 · Accepted Answer

make props: true for the destination route -- 在 router 的 index.js 文件中

    {
      path: '/home',
      name: 'home',
      component: taskChooser,
      props: true,
      }

在组件中定义 props，例如 props: ['myprop'], - 注意引号
将您要从源路由传递的变量复制到与您的道具相同的名称 - 在本例中为 myprop

myprop = theVariableThatYouWantToPass

this.$router.replace({name:'home', params:{myprop}});

确保道具和变量的名称相同 - 道具用引号引起来。

它对我有用。

score 18 · Accepted Answer

感谢@Mayank 为我指明了正确的方向。

这是对我有用的正确语法。

注意propsin In 路由器索引

{
  path: '/componentPath',
  name: 'componentName',
  props: {
     header: true,
     content: true
  },
}

在您要重定向到的组件中，将 props 定义如下：
```
props: {
  myProperty: {
    type: <DATATYPE>
  },
}
```

执行重定向如下：

this.$router.push({
  name: 'componentName',
  params: {
    myProperty: <VARIABLE>
  }
})

在以后的生命周期事件中或在以后的生命周期事件中使用this.约定访问道具。created

在这种情况下，变量名称和属性名称不必相同，因为它是一个简单的映射。无论如何，这种命名约定将是一个奇怪的设计选择。

score 0 · Accepted Answer

我没有在 Vue 2 中测试过这个，但是在 Vue 3 中，当你点击一个链接时，你可以通过 props 传递一个字符串化的对象：

添加props: true到您的路线文件中，用于路线。

     {
         path: 'receipt',
         name: 'receipt',
         component: () => import('../pages/Receipt.vue'),
         props: true,
         beforeEnter(to, from, next) {
             if (!to.params.receiptData) {
                 return next({
                     name: 'dashboard',
                     params: {
                         locale: from.params.locale ? from.params.locale : 'en',
                     },
                 });
             }

             return next();
         },
     },

将您的字符串化对象作为router.push().

    const receiptData = {
         transferType: 'default',
         recipient: receiver.value.name,
         referenceNumber: '#B3423424234',
         amountSent: formAmount,
         transferFee: 0,
     };

     router.push({
         name: 'receipt',
         params: {
             receiptData: JSON.stringify(receiptData),
         },
     });

将 props 声明为组件中的实例数据。

 <script setup>
 import { computed } from 'vue';

 const props = defineProps({
   receiptData: {
       type: String,
       required: true,
   },
 })
 console.log('receiptData', props.receiptData);

 const parsedReceiptData = computed(() => JSON.parse(props.receiptData));

 </script>

我没有测试大小的上限，所以要小心传递一个巨大的对象，你会注意到我beforeEnter在路由上也显示了一个中间件，因为如果用户按 F5 刷新页面，道具将是丢失了，所以在我的情况下，我将用户重定向到页面之外，因为收据仅供一次性使用。

javascript - Vue，有没有办法在没有 URL 参数的路由之间传递数据？

3 回答 3

Related

Reference