尝试使用 VueRouter 迁移 Vue 应用程序时出现控制台错误答案

【问题标题】：Getting a console error while trying to migrate a Vue App with VueRouter尝试使用 VueRouter 迁移 Vue 应用程序时出现控制台错误
【发布时间】：2019-12-13 18:27:46
【问题描述】：

我打算将一个独立的 Vue 应用程序移植到一个更大的 Java Spring Web 项目中。 Vue 应用程序将 Vue 路由器作为依赖项。当我尝试加载主页时，我在浏览器控制台中收到 [Vue warn]: Error in render: "TypeError: Cannot read property 'to' of undefined". found in ---> <RouterLink>...<AppHeader> at src/views/AppHeader.vue 错误。

主 JSP 加载正常，并且正在使用已编译的 JS 文件。

src/main.js

import Vue from 'vue';
import AppLayout from './views/Layout.vue';
import router from './router';
import Vuetify from 'vuetify';
import vueMoment from 'vue-moment';
import VueTippy from 'vue-tippy';
new Vue({
  el: '#app',
  router,
  render: h => h(AppLayout)
});
Vue.use(VueTippy);
Vue.use(Vuetify);
Vue.use(vueMoment);

src/views/AppLayout.vue

<template>
  <div id="app">
   <app-header></app-header>
    <section class="main-section section">
      <div class="container content">
        <router-view></router-view>
      </div>
    </section>
  <app-footer></app-footer>
  </div>
</template>
<script>
import AppHeader from './AppHeader.vue';
import AppFooter from './AppFooter.vue';
export default {
  components: {
    'app-header': AppHeader,
    'app-footer': AppFooter
  }
}
</script>

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import SearchForm from '../views/search/searchform.vue'
Vue.use(VueRouter)
const router = new VueRouter({
  mode: 'history',
  scrollBehavior: (to, from, savedPosition) => ({ y: 0 }),
  routes: [
    { path: '/app/path/search', component: SearchForm },
    { path: '/app/path/new', component: NewReturn },
    { path: '/app/path/home', component: SearchForm },
    { path: '/', redirect: '/app/path/search' },
    { path: '*', component: NotFound }
  ]
})
export default router

src/views/Appheader.vue

<template>
  <div>
    <router-link to="/app/path" exact><a href="">Search</a></router-link>
  </div>
</template>

似乎路由器链接由于某种原因无法正常工作。我似乎无法弄清楚如何解决这个问题。有人知道我错过了什么吗？

【问题讨论】：

标签： javascript java html vue.js vuejs2

【解决方案1】：

你不需要在router-link里面有<a>标签，使用<router-link>时由vue渲染

https://router.vuejs.org/api/#router-link

未定义的“to”将是您的空 href 声明。

【讨论】：