Vue，有没有一种方法可以在没有URL参数的情况下在路由之间传递数据？

Question

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

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

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

我还签出了these选项，但它们都使用了我们所知道的URL或查询参数。

一个丑陋的解决方案是将数据写入本地存储，然后在本地存储中读取，但这会产生大量的开销和复杂性（例如，如果我只希望读取一次该数据，等等）。

有没有更优雅的解决方案？

谢谢！

Answer 1

1. 制作道具：对于目标路由为true-在路由器的index.js文件中

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

1. 在组件中定义props，例如props：['myprop']，-注意引号

2. 将要从源路由传递的变量复制到与prop相同的名称-在本例中为myprop

myprop = theVariableThatYouWantToPass

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

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

对我有用。

Answer 2

感谢@Mayank向我指出正确的方向。

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

1. 注意路由器内索引中的props

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

2. 在您要重定向到的组件中，将道具定义如下：

   props: {
     myProperty: {
       type: <DATATYPE>
     },
   }
   

3. 执行以下重定向：

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

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

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