Question

我正在尝试使用vue-router将数据从一个组件重定向并传递到另一个组件。

在我的主要组件中，我有一个单击链接，在这里我调用JavaScript函数进行路由。

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

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

到目前为止，单击链接时，路由本身给控制台错误。

未捕获的TypeError：无法读取未定义的属性'_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的回答，我做了这样的事情-

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

现在，当我单击链接时，没有任何反应，也没有控制台错误。请帮忙吗？让我知道是否可以提供更多详细信息。

Answer 1

您需要将{ routeOptions: { authRequired: true } }数据传递到Vue组件

router

您可以在Getting Started document

中查看更多详细信息

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

1 个答案: