Vuejs с vue-routs Не удается прочитать свойство 'путь' из неопределенного - PullRequest
Новая
       8

Vuejs с vue-routs Не удается прочитать свойство 'путь' из неопределенного

0 голосов
/ 06 сентября 2018

Я обновил мое приложение vue js с версии v1.0 до v3.0.1, и с тех пор я всегда получаю исключение (подробное сообщение об исключении ниже) при вызове нового пути маршрутизатора.

Вот так выглядит мой main.js: 

require('es6-shim')

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueI18n from 'vue-i18n'
import messages from '../i18n/messages'
import store from './store'
import App from './App'
import { sync } from 'vuex-router-sync'

import DemoshopCartPage from 'components/DemoshopCartPage'
import DemoshopSuccessPage from 'components/DemoshopSuccessPage'
import DemoshopCancelPage from 'components/DemoshopCancelPage'
import DemoshopErrorPage from 'components/DemoshopErrorPage'
import DemoshopConfirmOrderPage from 'components/DemoshopConfirmOrderPage'
import DemoshopAdditionalFieldsModal from 'components/DemoshopAdditionalFieldsModal'
import DemoshopSeamlessLogsModal from 'components/DemoshopSeamlessLogsModal'
import DemoshopIntegrationCodeModal from 'components/DemoshopIntegrationCodeModal'
import DemoshopPaymentParametersModal from 'components/DemoshopPaymentParametersModal'
import DemoshopIntegrationCodeForConfirmationModal from 'components/DemoshopIntegrationCodeForConfirmationModal'

Vue.use(VueRouter)

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
})

let modalsRoutes = [{
  path: 'additional-fields',
  component: DemoshopAdditionalFieldsModal
},
  {
    path: 'additional-fields/:tab',
    component: DemoshopAdditionalFieldsModal
  },
  {
    path: 'seamless-logs',
    component: DemoshopSeamlessLogsModal
  },
  {
    path: 'integration-code',
    component: DemoshopIntegrationCodeModal
  },
  {
    path: 'payment-parameters',
    component: DemoshopPaymentParametersModal
  },
  {
    path: 'integration-code-confirm',
    component: DemoshopIntegrationCodeForConfirmationModal
  }
]

let router = new VueRouter({
  routes: [
    {path: '/cart', component: DemoshopCartPage, children: modalsRoutes},
    {path: '/success', component: DemoshopSuccessPage, children: modalsRoutes},
    {path: '/cancel', component: DemoshopCancelPage, children: modalsRoutes},
    {path: '/error', component: DemoshopErrorPage, children: modalsRoutes},
    {path: '/confirmOrder', component: DemoshopConfirmOrderPage, children: modalsRoutes},
    {path: '/', redirect: '/cart'}
  ]
})

sync(store, router)

/* eslint-disable no-new */
new Vue({
  el: '#demoApp',
  components: {App},
  router,
  i18n,
  store,
  render: h => h(App)
})

И это мой источник HTML, который я использую в компоненте vue: 

 <template>
  <div class="dev-toolbar">
    <ul>
      <li class="cart-action">
        <router-link :to="'additional-fields'" title="Additional fields" append>
          <i class="fa fa-list-ul"></i> fields
        </router-link>
      </li> ....

При нажатии на ссылку я всегда получаю эту ошибку: 

TypeError: Cannot read property 'path' of undefined
    at eval (eval at <anonymous> (app.js:1320), <anonymous>:279:34)
    at eval (eval at <anonymous> (app.js:2922), <anonymous>:2001:13)
    at Array.forEach (<anonymous>)
    at HashHistory.updateRoute (eval at <anonymous> (app.js:2922), <anonymous>:2000:26)
    at eval (eval at <anonymous> (app.js:2922), <anonymous>:1877:12)
    at eval (eval at <anonymous> (app.js:2922), <anonymous>:1986:7)
    at step (eval at <anonymous> (app.js:2922), <anonymous>:1716:7)
    at runQueue (eval at <anonymous> (app.js:2922), <anonymous>:1727:3)
    at eval (eval at <anonymous> (app.js:2922), <anonymous>:1981:5)
    at step (eval at <anonymous> (app.js:2922), <anonymous>:1716:7)

Это также получает то же исключение в журнале консоли, когда я пытаюсь вызвать его с помощью метода, подобного: 

callPush() {
     this.$router.push('additional-fields')
  },

Это зависимости, которые я использую в моем package.json 

"dependencies": {
"babel-runtime": "^6.0.0",
"dot-object": "1.4.1",
"es6-promise": "^4.1.0",
"es6-shim": "^0.35.1",
"font-awesome": "4.6.3",
"highlight.js": "^9.7.0",
"jquery": "3.0.0",
"lodash": "4.13.1",
"query-string": "4.2.2",
"vue": "2.5.17",
"vue-i18n": "7.4.2",
"vue-multiselect": "2.1.0",
"vue-resource": "1.3.6",
"vue-router": "3.0.1",
"vuex": "3.0.1",
"vuex-router-sync": "^5.0.0"
},

Тем не менее правильная страница открывается успешно. Я просто хочу избавиться от этой ошибки

1 Ответ

0 голосов
/ 06 сентября 2018

Маршрутизатор работает с именами маршрутов. Вам нужно назвать свои маршруты. 

let modalsRoutes = [
  {
    name: 'additional-fields',
    path: 'additional-fields',
    component: DemoshopAdditionalFieldsModal
  },
  {
    name: 'additional-fields-tab',
    path: 'additional-fields/:tab',
    component: DemoshopAdditionalFieldsModal
  },
  {
    name: 'seamless-logs',
    path: 'seamless-logs',
    component: DemoshopSeamlessLogsModal
  },
  {
    name: 'integration-code',
    path: 'integration-code',
    component: DemoshopIntegrationCodeModal
  },
  {
    name: 'payment-parameters',
    path: 'payment-parameters',
    component: DemoshopPaymentParametersModal
  },
  {
    name: 'integration-code-confirm',
    path: 'integration-code-confirm',
    component: DemoshopIntegrationCodeForConfirmationModal
  }
]

также, ваш шаблон неверен. Ваш маршрут не нуждается в ' вокруг названия: 

<template>
  <div class="dev-toolbar">
    <ul>
      <li class="cart-action">
        <router-link :to="additional-fields" title="Additional fields" append>
          <i class="fa fa-list-ul"></i> fields
        </router-link>
      </li>
    </ul>
  </div>
</template>
...