Javascript VUEJS vue路由器从嵌套路由访问路由器

从嵌套视图访问管线对象时出现问题。以下是简化代码：

main.js

import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'

Vue.use(VueRouter)
Vue.use(Vuetify)

const router = new VueRouter({
  routes : [
    {path : '/contacts', component: Contacts,
      children: [
        {
          path: ':id',
          component: ContactDetails
        }
      ]
    },
  ],
  mode: 'history'
})


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

ContactDetails.vue

<template>
    <v-btn icon dark class="mr-3" @click.native="editContact">
            <v-icon>edit</v-icon>
    </v-btn>
</template>

<script>

    export default {
        data : () => ({

        }),
        methods: {
           editContact: ()=>{
                console.log('edit contact');
                this.$router.go(-1) //this gives an error
           } 
        },


    }
</script>

从主要路线（aka/contacts）来看，它是有效的。我在孩子身上尝试了以下所有代码：

router.go(-1)
$router.go(-1)
this.$router.go(-1)
this.router.go(-1)
this.$parent.$router.go(-1)

---

它们都不起作用。有没有办法从嵌套路由到达路由器对象？或者我应该向父级发出事件并从父级更改视图吗？

我在您的代码中发现一个错误-它在

（）=>{…}

函数中：）

使用箭头功能，您正在寻址此（对象）的

ContactDetails

-组件

，并且它实际上不包含任何
$router
。将箭头函数更改为
function（）{}
后，代码将按预期工作，因为Vue重新绑定到声明
$router
的实例

现在，让我们看看您的代码：


Vue.use（VueRouter）
让ContactDetails={
安装的（）{
log（'ContactDetails mounted…'）；
},
方法：{
editContact:function（）{
console.log（“编辑联系人”）；
this.$router.go（-1）//这不再给出错误
} 
},
模板：`edit`，
}
让联系人={
组件：{ContactDetails}，
安装的（）{
log（'Contacts mounted…'）；
},
模板：`联系人…`，
};
常量路由器=新的VueRouter({
模式：“哈希”，
路线：[{
路径：'/contacts'，
组成部分：联系人，
儿童：[{
路径：“id”，
组件：联系人详细信息
}]
}],
});
const vm=新的Vue({
el:“#应用程序”，
组成部分：{
联络，
联系方式详情，
},
路由器
});
虚拟机$router.push（“/contacts/id”）
您不需要发出事件，您的子组件具有对路由器实例的默认访问权限。您能给我们看一下
联系人
部件代码吗？
router.go(-1)
$router.go(-1)
this.$router.go(-1)
this.router.go(-1)
this.$parent.$router.go(-1)