VUEJS vue-router 从嵌套路由访问路由器答案

【问题标题】：VUEJS vue-router access router from nested routesVUEJS vue-router 从嵌套路由访问路由器
【发布时间】：2017-10-02 04:41:40
【问题描述】：

我无法从嵌套视图访问路由对象。这是简化的代码：

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)

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

【问题讨论】：

您不需要发出事件，您的子组件可以默认访问您的路由器实例。你能告诉我们Contacts组件代码吗？

标签： javascript vuejs2 vue-router

【解决方案1】：

我在您的代码中发现了一个错误 - 它在 ()=>{...} 函数中 :)

使用箭头函数，您正在寻址ContactDetails-component this（对象），它确实不包含任何$router。将箭头函数更改为 function() {} 后，您的代码将按预期工作，因为 Vue 重新绑定到其声明 $router 的实例。

现在，让我们看看你的代码working copy (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>

【讨论】：