Categories
javascript sails.js vue-router vue.js

Parasails.js and using (Vue Router or virtualPages)

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.