vue公共组件如何根据路由请求不同的接口，写一个demo

你好！关于你的问题，可以在vue-router的beforeEach钩子中获取当前路由和参数，然后根据不同的路由请求不同的接口数据。以下是一个简单的demo实现：

//在main.js中引入axios
import axios from 'axios'
Vue.prototype.$axios = axios

//在router/index.js中定义路由
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about/:id',
      name: 'About',
      component: About
    }
  ]
})

//在beforeEach钩子中请求不同的接口数据
router.beforeEach((to, from, next) => {
  if (to.path === '/') {
    //请求首页数据
    axios.get('/api/home').then(res => {
      //处理数据...
      next()
    })
  } else if (to.path === '/about') {
    //请求关于页面数据
    axios.get('/api/about/' + to.params.id).then(res => {
      //处理数据...
      next()
    })
  } else {
    next()
  }
})

export default router

以上是一个简单的demo实现，具体的业务逻辑可以根据实际情况进行修改。希望能够帮到你！