代码之家 › 专栏 › 技术社区 › Souvik Ghosh

无法读取未定义Vue JS的属性“_router”

vue-router vue.js javascript

0

Souvik Ghosh · 技术社区 · 8 年前

我正在尝试重定向数据,并使用 vue-router .

在我的主要组件中,我有一个点击链接,在这里我调用一个javascript函数来进行路由。

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

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

到目前为止,当点击链接时,路由本身会给出控制台错误。

未捕获的类型错误:无法读取未定义的属性“_router”

在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的回答,我做了类似的事情-

在我的主.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>

现在,当我单击链接时,没有发生任何事情,也没有控制台错误。有什么帮助吗?如果我能提供更多细节,请告诉我。

1 回复 | 直到 8 年前

1

ittus 8 年前

你需要通过 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