无法读取未定义的属性“路线”

Question

我正在使用 nativescript-vue-router 在我的 nativescript-vue 应用程序中处理路由。

我之前做过手动路由，但我正在使用这个包，所以可以访问beforeEach 方法。

我正在尝试获取路线列表并遍历它们，但我无法访问$router.options.routes

我收到以下错误

TypeError: Cannot read property 'routes' of undefined

这就是我基本上想要做的事情

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

但是，如果我直接在标记中访问$router.push('Home')，它就可以工作并且我可以访问该特定路线。

我的代码几乎与文档相同，除了我的 app.js 有点不同，因为我使用的是 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();

这是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

请注意，如果我取消注释 ignoreSame，我会收到错误 Undefined variable ignoreSame

这是DrawerContent.vue 中的标记，我可以像这样单独访问每条路线

<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>

但我想获取数组中的所有路由并循环遍历它们，就像这样

<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>

编辑：即使我转到 router/index.js 和 console.log(router.routes) 我也会得到 undefined

Answer 1

您可以在声明“Vue.prototype.$router = router;”下的 router/index.js 中定义原型这将使实例在任何组件中都可用。

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;