带有vue-routes的Vuejs无法读取未定义的属性“path”

Question

我已经将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"
},

然而，正确的页面是成功打开的。我只是想摆脱这个错误

Answer 1

路由器在路由名称上运行。您需要为路线命名。

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>