0
votes

I'm using nativescript-vue-router to handle routing in my nativescript-vue app.

I had done manual routing before, but I'm using this package so can access the beforeEach method.

I'm trying to get the list of routes and loop through them but I'm unable to access $router.options.routes

I get the following error

TypeError: Cannot read property 'routes' of undefined

This is what I'm basically trying to do

this.$router.options.routes.forEach(route => {
                this.items.push({
                    name: route.name,
                    path: route.path,
                    icon: route.icon,
                    component: route.component
                })
            })

However, if I access $router.push('Home') directly in the markup, it works and I can access that specific route.

My code is almost identical to the documentation, except my app.js is a bit different since I'm using RadDrawer

import Vue from "nativescript-vue"
import App from "./components/App"
//import routes from '~/router'
import router from './router'
import { store } from './store/store'
import Home from "./components/Home"
import DrawerContent from "./components/DrawerContent"
import RadSideDrawer from "nativescript-ui-sidedrawer/vue"

Vue.use(RadSideDrawer);

//Vue.prototype.$routes = routes

import VueDevtools from 'nativescript-vue-devtools'
Vue.use(VueDevtools)

Vue.config.silent = (TNS_ENV === 'production');

Vue.registerElement('CheckBox', () => require('nativescript-checkbox').CheckBox, {
    model: {
        prop: 'checked',
        event: 'checkedChange'
    }
});

new Vue({
    store,
    router,
    render (h) {
        return h(
          App,
          [
            h(DrawerContent, { slot: 'drawerContent' }),
            h(Home, { slot: 'mainContent' })
          ]
        )
      }
  }).$start();

This is router/index.js

import Vue from 'nativescript-vue'

import NSVueRouter from 'nativescript-vue-router-ns'

import Home from "../components/Home";
import Browse from "../components/Browse";
import Featured from "../components/Featured";
import Search from "../components/Search";
import Settings from "../components/Settings";
import Tasks from "../components/Tasks";
import Login from "../components/Login";
import Logout from "../components/Logout";

Vue.use(NSVueRouter);

const routes = [
    {
        path: '/',
        name: 'Home',
        icon: "\uf015",
        component: Home
    },
    {
        path: '/browse',
        name: 'Browse',
        icon: '\uf25a',
        component: Browse,
        meta: {
            auth: true
        }
    },
    {
        path: '/featured',
        name: 'Featured',
        icon: '\uf005',
        component: Featured
    },
    {
        path: '/search',
        name: 'Search',
        icon: '\uf002',
        component: Search
    },
    {
        path: '/settings',
        name: 'Settings',
        icon: '\uf013',
        component: Settings
    },
    {
        path: '/tasks',
        name: 'Tasks',
        icon: '\uf0ae',
        component: Tasks,
        meta: {
            auth: true
        }
    },
    {
        path: '/login',
        name: 'Login',
        icon: '\uf007',
        component: Login,
        meta: {
            guest: true
        }
    },
    {
        path: '/logout',
        name: 'Logout',
        icon: '\uf007',
        component: Logout,
        meta: {
            auth: true
        }
    }
];

const router = new NSVueRouter({
    //ignoreSame, // <-- Optional. Will set if reject or accept navigate to same current component.
    routes,
    /* eslint-disable-next-line no-undef  */
    verbose: TNS_ENV !== 'production' // <-- Optional. Will output the warnings to console.
});

export default router

Please note that if I uncomment ignoreSame I get an error Undefined variable ignoreSame

And this is the markup in DrawerContent.vue where I can access each route individually like so

<GridLayout
        columns="auto, *"
        class="sidedrawer-list-item"
        @tap="$router.push('Tasks')">
    <Label col="0" text="\uf015" class="fa"></Label>
    <Label col="1" text="Tasks" class="p-r-10"></Label>
</GridLayout>

But I want to get all the routes in an array and loop through them, like so

<GridLayout
        columns="auto, *"
        :class="'sidedrawer-list-item' + (selectedPage === page.name ? ' selected': '')"
        v-for="(page, i) in pages"
        :key="i"
        @tap="goToPage(page.component)">
    <Label col="0" :text="page.icon" class="fa"></Label>
    <Label col="1" :text="page.name" class="p-r-10"></Label>
</GridLayout>

EDIT: even when I goto router/index.js and console.log(router.routes) I get undefined

1
what is output of this.$router.options? - random
It returns undefined but this.$router returns the following { back: { [Function: back] [length]: 0, [name]: 'back' }, push: { [Function: push] [length]: 0, [name]: 'push' }, pushClear: { [Function: pushClear] [length]: 1, [name]: 'pushClear' } } - Halnex
It doesn't have options property. - random
You are not using classic vue-router (import NSVueRouter from 'nativescript-vue-router-ns') - mare96

1 Answers

0
votes

You can define prototype in router/index.js right under the declaration "Vue.prototype.$router = router;" this will make the instance available in any component.

const router = new NSVueRouter({
    //ignoreSame, // <-- Optional. Will set if reject or accept navigate to same current component.
    routes,
    /* eslint-disable-next-line no-undef  */
    //verbose: TNS_ENV !== 'production' // <-- Optional. Will output the warnings to console.
})

Vue.prototype.$router = router;