emiliogrv / nativescript-vue-router

A simple router implementation that is suitable for NativeScript-Vue.
14 stars 1 forks source link

Cannot read property 'routes' of undefined #2

Open geosem42 opened 5 years ago

geosem42 commented 5 years ago

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 your 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(store.getters.loggedIn ? routes.Home : routes.Login, { slot: 'mainContent' })
            h(Home, { slot: 'mainContent' })
          ]
        )
      }
  }).$start();
emiliogrv commented 5 years ago

Hi @geosemaan probably your plobem is that you're not using Frame as main component, that is a requirement> https://github.com/emiliogrv/nativescript-vue-router#prerequisites--requirements

You can have any component inside your Main Frame like RadSideDrawer, but the Main must be a Frame to work with this plugin