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

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

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;

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

1 个答案: