I'm attempting to transfer data and redirect from one component to another using vue-router.
Within my main component, I have a link that triggers a JavaScript function for routing.
<a href="javascript:void(0);" @click="switchComponent('ToolDetail')">click here</a>
methods: {
switchComponent(comp) {
this.$router.push({name:comp});
},
Currently, there is a console error when clicking the link for routing.
Uncaught TypeError: Cannot read property '_router' of undefined
In main.js, I've 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: Following guidance from @ittus, I made some changes like so-
In 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(comp) {
const routes = [
{ path: '/ToolDetail', component: ToolDetail, name: 'ToolDetail' }
]
const router = new VueRouter({
routes
})
router.push({name:'ToolDetail'});
},
...
..
</script>
Now, after clicking the link, nothing happens and no console errors appear. Could anyone provide assistance with this? Let me know if more details are needed.