我正在尝试使用 vue-router
将数据从一个组件重定向并传递到另一个组件。
在我的主要组件中,我有一个点击链接,我在其中调用 JavaScript 函数来执行路由。
<a href="javascript:void(0);" @click="switchComponent('ToolDetail')">click here</a>
methods: {
switchComponent(comp) {
this.$router.push({name:comp});
},
到目前为止,当单击链接时,路由本身会给出控制台错误。
Uncaught TypeError: Cannot read property '_router' of undefined
在我的 main.js 中,我已经导入了我的路由器-
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)
编辑: 根据@ittus的回答,我做了这样的事情-
在我的 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')
在我的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>
现在,当我单击链接时,没有任何反应,也没有控制台错误。 请问有什么帮助吗?如果我可以提供更多详细信息,请告诉我。
最佳答案
您需要将router
数据传递给Vue组件
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',
component: ToolDetail // place your component here
}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
您可以在Getting Started document查看更多详情
关于javascript - 无法读取未定义的Vue js的属性 '_router',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51346224/