Cannot reuse components as views, using meta

[unremarkablegarden]

'/news': { component: Posts, meta: { path: 'news', title: 'News', } },

I'm trying to use one component, Posts.vue, for multiple views. But all the views turn in to the last referenced in the navigator setup. The content in Posts is loaded using the meta.path.

Seems I have to make duplicates of this Posts component for it to work. Weird.

[rigor789]

Share your code - can't help if I don't know how you are using it.

[unremarkablegarden]

The code below works perfectly fine if I copy it to two components, News.vue and Seminare.vue. Both have the same layout, etc. Just different content. When I try to use 'meta' in the navigator to load different content in a single component (Posts), I get the same content in both (the last one referenced in the navigator config). And as I said, leaving everything as it is, as long as it's two separate components it works. You just can't re-use a component in the navigator.

Not sure if this is a limitation of navigator or of NativeScript Vue...

routes.js:

'/news': {
        component: Posts,
        meta: {
            path: 'news',
            needsAuth: true,
            title: 'News',
        }
    },
    '/seminare': {
        component: Posts,
        meta: {
            path: 'seminare',
            needsAuth: true,
            title: 'Seminare',
        }
    },

Posts.vue

computed:

path: function () {
            return this.$navigator.route.meta.path
        },

template:
<StackLayout v-for='(post, index) in resources[path]' :key='index' @onTap='viewPost(post)'>

Here resources[path] works fine if they're in different component files.

[rigor789]

Just checked this, and correct - components can't be reused for multiple routes.

I don't see an easy way to fix this, as the components have to keep track what route they belong to:

nativescript-vue-navigator/index.js

Line 7 in 99f9e36

routes[path].component.__path = path

nativescript-vue-navigator/index.js

Lines 10 to 17 in 99f9e36

	Vue.mixin({
	mounted() {
	// attach the current path if set to the root element
	if (this.$options.__path) {
	this.$el.setAttribute('__path', this.$options.__path)
	}
	},
	})

However, it's possible to work around the issue with cloning the component. For example

component: Object.assign({}, Posts)