Vue 子组件路由跳转父组件并更新状态

可以在子组件中使用 $router.push() 方法来跳转到不同的父组件，并且可以通过 props 将子组件的数据传递给父组件进行状态更改。具体步骤如下：

1. 在子组件中引入 vue-router：

import router from '@/router'

2. 在子组件中定义一个方法来进行路由跳转：

methods: {
  goToParent() {
    router.push({ name: 'parent', params: { id: this.id }})
  }
}

其中，name 为要跳转的父组件的路由名称，params 为要传递的参数。

3. 在父组件中定义一个 props 来接收子组件传递的数据：

props: {
  childData: {
    type: Object,
    default: null
  }
}

4. 在父组件中使用子组件时，通过 v-bind 将子组件的数据传递给 props：

<Child :childData="data" />

5. 在父组件中定义一个方法来更改子组件的状态：

methods: {
  changeChildState() {
    this.$refs.child.setState()
  }
}

其中，$refs 为访问子组件的引用，setState 为子组件中定义的方法。

6. 在子组件中定义 setState 方法来更改子组件的状态：

methods: {
  setState() {
    this.data = newData
  }
}

其中，newData 为要更改的数据。

这样，就可以在子组件中使用路由跳转不同的父组件并且改变子组件里面数据的状态了。