时间戳

首页 > 解决方案 > Parasails.js 和使用（Vue Router 或 virtualPages）

javascript - Parasails.js 和使用（Vue Router 或 virtualPages）

问题描述

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 中所做的那样？

感谢您的任何帮助！

编辑在 parasails 组件上 使用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'
  },

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

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

标签： javascriptvue.jssails.jsvue-router

解决方案

没错，您提供的链接似乎确实缺少一些有关如何设置虚拟页面的信息。我不太了解仅使用滑翔伞，但在 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' },

推荐阅读