CODEWITHSUNDEEP
javascriptjavahtmlvue.jsvuejs2
aCarella
aCarella

Reputation: 2578

Getting a console error while trying to migrate a Vue App with VueRouter

I am tying to port a stand alone Vue app into a larger Java Spring web project. The Vue app has Vue router as a dependency. When I try to load the main page, I am getting a [Vue warn]: Error in render: "TypeError: Cannot read property 'to' of undefined". found in ---> <RouterLink>...<AppHeader> at src/views/AppHeader.vue error in the browser console.

The main JSP loads fine, and is using a compiled JS file.

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>

It seems like router-link is not working for some reason. I can't seem to figure out how to fix this issue. Anyone know what I am missing?

Upvotes: 1

Views: 131

Answers (1)

paddyfields
paddyfields

Reputation: 1539

You don't need an <a> tag inside the router-link, that is rendered by vue when using <router-link>

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

The undefined 'to' will be your empty href declaration.

Upvotes: 1

Related Questions