根据路由更改Vue组件中的数据

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about/:id', component: About }
]

const router = new VueRouter({
  routes
})

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

// Home.vue
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

// About.vue
<template>
  <div>
    <h1>About</h1>
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // 根据路由参数获取数据
      const id = this.$route.params.id
      // 根据id请求数据
      // ...
      // 更新组件中的数据
      this.data = '根据路由参数获取的数据'
    }
  }
}
</script>