Problem with vue-router and nested routes


#1

Hey guys, I’m trying to use nativescript-vue + vue-router with nested routes
So… I have the following components at my project:

Home.vue:

<template>
  <Page ref="page" actionBarHidden="true" backgroundSpanUnderStatusBar="true">
    <GridLayout columns="*" rows="6*, 1*, 20*, 3*">
      <StackLayout row="0" col="1">
        <Label>HOME TEST</Label>
      </StackLayout>
      <Label row="1" col="1"/>
      <FlexboxLayout row="2" col="1" backgroundColor="#3c495e">
        <router-view ></router-view>
      </FlexboxLayout> 

      <StackLayout class="bg-primary-dark" orientation="horizontal" row="4" col="1">
        <Button  text="Child1" class="btn btn-primary" @tap="$router.push('/home')"></Button>
        <Button  text="Child2" class="btn btn-primary" @tap="$router.push('/home/child2')"></Button>
      </StackLayout>
    </GridLayout>
  </Page>
</template>


<script> 
...
</script>

<style lang="scss">
...
</style>

Child1.vue:

<template>
  <Label>Child 1</Label>
</template>


<script> 
export default {
  data () {
    return {
    }
  },
  mounted() {
    console.log('Child 1')
  }
}
</script>

<style lang="scss">

</style>

Child2.vue:

<template>
  <Label>Child 2</Label>
</template>

<script> 
export default {
  data () {
    return {
    }
  },
  mounted() {
    console.log('Child 2')
  }
}
</script>

<style lang="scss">

</style>

and the router/index.js

...

const router = new VueRouter({
  pageRouting: true,
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: '',
          component: Child1
        },
        {
          path: 'child2',
          component: Child2
        }
      ],
    },
    {path: '*', redirect: '/home'},
  ],
});

router.replace('/');
...

The problem is… when I’m at the “Home” component, the “Child1” component template content is not rendered at the “router-view”, but it logs the message “Child 1”. And when I tap at the “Child2” button, it logs “Child 2” two times and not render the template content.

Log:

Refreshing application...
Successfully synced application org.nativescript.application on device 02157df299f09509.
ActivityManager: Start proc 27477:org.nativescript.application/u0a211 for activity org.nativescript.application/com.tns.NativeScriptActivity
JS: 'NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.'
JS: 'Child 1'
JS: 'Child 2'
JS: 'Child 2'
JS: 'Child 1'
JS: 'Child 1'
JS: 'Child 1'

can anyone help me with this?


#2

Vue Router is not yet consistent, for now its recommended to use manual routing as described in official docs. Hopefully the next version of {N} Vue should fix most issues with Router and introduce multi frame support.


#3

Okay then, I’ll use the manual routing for now, thanks :slight_smile: