I am trying to redirect and pass data from one ponent to another using vue-router.

In my main ponent I have a click link where I am calling a JavaScript function to do the routing.

<a href="javascript:void(0);" @click="switchComponent('ToolDetail')">click here</a>

methods: {
   switchComponent(p) {
   this.$router.push({name:p});
},

As of now the routing itself is giving console error when the link is clicked.

Uncaught TypeError: Cannot read property '_router' of undefined

In my main.js I have already imported my router-

import Vue from 'vue'
import App from './App.vue'
import router from 'vue-router'

Vue.config.productionTip = false
export const changeRoute = new Vue();
new Vue({
  render: h => h(App)
}).$mount('#app')

Vue.use(router)

Edit: Based on answer from @ittus, I did something like this-

In my main.js-

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

In my HomeContent.vue-

<template>
    ...
    ..
    <a href="javascript:void(0);" @click="switchComponent('ToolDetail')">click here</a>
    ...
    ..
</template>
<script>
import ToolDetail from './ToolDetail.vue';
import VueRouter from 'vue-router';

...
..

methods: {
   switchComponent(p) {
      const routes = [
        { path: '/ToolDetail', ponent: ToolDetail, name: 'ToolDetail' }
      ]
      const router = new VueRouter({
        routes
      })
      router.push({name:'ToolDetail'});
  },

...
..
</script>

Now, when I click the link nothing happens and no console error. Any help with this please? Let me know if I can provide more details.

I am trying to redirect and pass data from one ponent to another using vue-router.

In my main ponent I have a click link where I am calling a JavaScript function to do the routing.

<a href="javascript:void(0);" @click="switchComponent('ToolDetail')">click here</a>

methods: {
   switchComponent(p) {
   this.$router.push({name:p});
},

As of now the routing itself is giving console error when the link is clicked.

Uncaught TypeError: Cannot read property '_router' of undefined

In my main.js I have already imported my router-

import Vue from 'vue'
import App from './App.vue'
import router from 'vue-router'

Vue.config.productionTip = false
export const changeRoute = new Vue();
new Vue({
  render: h => h(App)
}).$mount('#app')

Vue.use(router)

Edit: Based on answer from @ittus, I did something like this-

In my main.js-

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

In my HomeContent.vue-

<template>
    ...
    ..
    <a href="javascript:void(0);" @click="switchComponent('ToolDetail')">click here</a>
    ...
    ..
</template>
<script>
import ToolDetail from './ToolDetail.vue';
import VueRouter from 'vue-router';

...
..

methods: {
   switchComponent(p) {
      const routes = [
        { path: '/ToolDetail', ponent: ToolDetail, name: 'ToolDetail' }
      ]
      const router = new VueRouter({
        routes
      })
      router.push({name:'ToolDetail'});
  },

...
..
</script>

Now, when I click the link nothing happens and no console error. Any help with this please? Let me know if I can provide more details.

• javascript
• vue.js
• vue-router

• Are you sure - HomeContent.vue exporting this in App.vue file ?, also make sure you are using export in HomeContent.vue correctly – dhaker Commented Jul 16, 2018 at 9:39

1 Answer 1

You need to pass router data to Vue ponent

import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'

Vue.config.productionTip = false
export const changeRoute = new Vue();

Vue.use(Router) // should place it before new Vue()

// just example
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'ToolDetail',
      ponent: ToolDetail // place your ponent here
    }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

You can check more details in Getting Started document