Parasails.js and using (Vue Router or virtualPages)

Question

Parasails.js documentation mentions that it does support router and virtualPages, but does not actually specify how to interact with these options.

I am somewhat used to the normal Vue setup, of importing Vue, VueRouter and each individual component directly into the .vue file.

But with parasails.js, I feel that these parameters are expecting objects that are not defined in the documentation, so I'm just guessing at this point.

I have gotten to this point so far:

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() {
    //…
  },
});

But I am receiving the error:

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

Has anyone successfully used router or virtualPages in parasails.js and can help me out?

Also, my next question is: When passing components to virtualPages, do I just supply the name of another parasails registered component as a string? Or do I have to include that component in the code, and pass it as an object as one would do in VueRouter?

Thanks for any and all help!

EDIT Using virtualPages on a parasails component apparently will not work.

But adding these properties to a parasails page seems to be the intended usage:

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

Now, although I am no longer receiving errors, the <router-view></router-view> element is not being populated with the proper view when the <router-link to="/test/foo/">Foo</router-link> is clicked on the page.

I have added the following route to the project

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

Any clues as to why my router-view is not being updated properly?

I think this documentation requires some serious updates as this is a pure guessing game every step of the way.

Answer 1

You're right, that link you provided does seem like its missing some info on how to set the virtual pages. I dont know much about using just parasails but in Sails v1 this is how I set virtual pages. (I use this mostly to have linkable modals.)

In your page script you define your data:

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

In your ejs file you can add this to a wrapping div:

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

Routes file:

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