Parasails.js和使用（Vue路由器或virtualPages）

Question

Parasails.js文档提到它确实支持router和virtualPages，但实际上并未指定如何与这些选项进行交互。

我有点习惯正常的Vue设置，即将Vue，VueRouter和每个单独的组件直接导入.vue文件。

但是对于parasails.js，我觉得这些参数是期望文档中未定义的对象，因此我只是在猜测。

到目前为止，我到现在为止：

parasails.registerComponent('mainSearch', {      
  props: [
    'prop1',
    'prop2',
  ],

  html5HistoryMode: 'history',
  virtualPages: [
    { path: '/foo', component: 'page2' },
  ],

  template: `
    <div class="test">
       <p>Test</p>
       <router-link to="/foo">Foo</router-link>
       <router-view />
    </div>
  `,

  beforeMount: function() {
    //…
    // Attach any initial data from the server.
    _.extend(this, SAILS_LOCALS);

  },
  mounted: async function(){
    //…
  },
  beforeDestroy: function() {
    //…
  },
});

但是我收到错误：

TypeError: In the HTML template (during render): Cannot read property 'matched' of undefined

有没有人成功地使用router或virtualPages在parasails.js并能帮助我吗？

另外，我的下一个问题是：将组件传递到时virtualPages，我是否只需将另一个parasails注册组件的名称作为字符串提供？还是我必须在代码中包含该组件，然后像在VueRouter中那样将其作为对象传递？

感谢您提供的所有帮助！

编辑 使用virtualPages上的滑翔伞组件显然是行不通的。

但是将这些属性添加到parasails页面似乎是预期的用法：

  virtualPages: true,
  html5HistoryMode: 'history',
  virtualPageSlug: undefined,
  virtualPagesRegExp: /^\/test\/?([^\/]+)?/,

现在，尽管我不再收到错误，但是单击页面上的<router-view></router-view>时，该元素未使用正确的视图填充<router-link to="/test/foo/">Foo</router-link>。

我已将以下路线添加到项目中

  '/test/foo/' : {
    view: 'pages/test'
  },

关于为什么我的路由器视图无法正确更新的任何线索？

我认为本文档需要进行一些认真的更新，因为这是一个纯粹的猜测游戏。

Answer 1

您说得对，您提供的链接似乎缺少一些有关如何设置虚拟页面的信息。我不太了解只使用滑翔伞，但在 Sails v1 中，这就是我设置虚拟页面的方式。（我主要使用它来拥有可链接的模态。）

在您的页面脚本中定义您的数据：

virtualPages: true, html5HistoryMode: 'history', virtualPageSlug: undefined, virtualPagesRegExp: /^\/foo\/bar\/?([^\/]+)?/,

在您的 ejs 文件中，您可以将其添加到包装 div 中：

v-if="virtualPageSlug === 'new'"

路线文件：

'GET /foo/bar/:virtualPageSlug?': { action: 'foo/view-bar' },