Skip to content

$navigator.path not updated correctly if using class style Vue components #31

Closed
@superalex

Description

@superalex

I have a sample where I'm using your plugin to navigate to two different components and show the path in the $navigator.path and it works perfectly:

app.js

import Vue from 'nativescript-vue';

import App from './components/App';

import Navigator from 'nativescript-vue-navigator'
import { routes } from './routes'
Vue.use(Navigator, { routes })

new Vue({
    render: h => h(App),
}).$start();

routes/index.js

import C1 from '~/components/c1'
import C2 from '~/components/c2'

export const routes = {
    '/route-1': {
        component: C1,
    },
    '/route-2': {
        component: C2,
    }
}

compontents/App.vue

<template>
    <GridLayout class="App" rows="*, auto">
        <ContentView row="0">
            <Navigator defaultRoute="/route-1" />
        </ContentView>

        <nav row="1" />
    </GridLayout>
</template>

<script>
    import nav from "./nav";
    export default {
        components: {
            nav
        },
        data() {
            return {};
        }
    };
</script>

components/c1.vue

<template>
    <Page class="page">
        <StackLayout>
            <Label text="Component 1" />
        </StackLayout>
    </Page>
</template>

<script>
    export default {};
</script>

components/c2.vue

<template>
    <Page class="page">
        <StackLayout>
            <Label text="Component 2" />
        </StackLayout>
    </Page>
</template>

<script>
    export default {};
</script>

If I use class Style Vue components with in the components:

components/c2.vue

<template>
    <Page class="page">
        <StackLayout>
            <Label text="Component 2" />
        </StackLayout>
    </Page>
</template>

<script>
    @Component
    export default class C2 extends Vue { };
</script>

Then $navigator.path isn't correctly updated and keeps the initial value.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions