嵌套路由中的VUEJS vue-router訪問路由器

Question

我有從嵌套視圖訪問路由對象的問題。 這是簡化的代碼：

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>

當我使用時，它說“路由器未定義”

this.$router.go(-1)

從主要路線（又名/ contacts）出發，就可以了。 我對孩子嘗試了以下所有代碼：

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

它們都不起作用。 有沒有辦法從嵌套路由到達路由器對象？ 還是應該向父母發送事件並從那里更改視圖？

Answer 1

我在您的代碼中發現錯誤-它在()=>{...}函數中：）

使用箭頭功能，您正在尋址ContactDetails this （對象），它實際上不包含任何$router 。 將箭頭函數更改為function() {}您的代碼將按預期工作，因為Vue重新綁定到聲明$router實例。

現在，讓我們看一下代碼的此工作副本（codepen） ：

 Vue.use(VueRouter) let ContactDetails = { mounted() { console.log('ContactDetails mounted...'); }, methods: { editContact: function() { console.log('edit contact'); this.$router.go(-1) //this DOES NOT give an error ANYMORE } }, template: `<button @click="editContact">edit</button>`, } let Contacts = { components: {ContactDetails}, mounted() { console.log('Contacts mounted...'); }, template: `Contacts... <ContactDetails></ContactDetails>`, }; const router = new VueRouter({ mode: 'hash', routes : [{ path : '/contacts', component: Contacts, children: [{ path: 'id', component: ContactDetails }] }], }); const vm = new Vue({ el: '#app', components: { Contacts, ContactDetails, }, router }); vm.$router.push("/contacts/id"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <router-view></router-view> </div>