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
this.$router.options
? - randomundefined
butthis.$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' } }
- Halnexoptions
property. - randomimport NSVueRouter from 'nativescript-vue-router-ns'
) - mare96