Vue Router路由传参优化：避免重复Axios请求咨询

1. 列表页跳转时复用已有数据 #

方法一：通过router-link的props传递 #

在列表页的跳转链接中，直接把当前项的完整数据通过props传给详情页，同时配置路由接收该参数：

列表页代码示例：

<router-link 
  :to="{ name: 'PostDetail', params: { id: post.id }, props: { postData: post } }"
>
  {{ post.title }}
</router-link>

路由配置示例：

const routes = [
  // 其他路由省略
  {
    path: '/post/:id',
    name: 'PostDetail',
    component: PostDetail,
    props: route => ({
      postData: route.props?.postData,
      id: route.params.id
    })
  }
]

详情页接收并处理：

<script>
import axios from 'axios'
export default {
  props: {
    postData: {
      type: Object,
      default: null
    },
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      currentPost: null
    }
  },
  created() {
    // 如果有传递过来的数据，直接用；没有就发请求
    this.currentPost = this.postData || null
    if (!this.currentPost) {
      this.fetchPostDetail()
    }
  },
  methods: {
    async fetchPostDetail() {
      const res = await axios.get(`/api/posts/${this.id}`)
      this.currentPost = res.data
    }
  }
}
</script>

方法二：通过路由state传递（基于History API） #

用编程式导航跳转时，把数据存在路由的state中，适合Vue Router 4+版本：

列表页点击事件示例：

<button @click="navigateToDetail(post)">查看详情</button>

methods: {
  navigateToDetail(post) {
    this.$router.push({
      name: 'PostDetail',
      params: { id: post.id },
      state: { postData: post }
    })
  }
}

详情页获取数据：

created() {
  // Vue 3用this.$router.currentRoute.value.state，Vue 2用this.$route.state
  const cachedPost = this.$router.currentRoute.value.state?.postData
  if (cachedPost) {
    this.currentPost = cachedPost
  } else {
    this.fetchPostDetail(this.$route.params.id)
  }
}

2. 兼容直接访问URL的场景 #

不管用哪种传递方式，直接输入URL时，路由的props或state都不会携带数据，所以必须在详情页的生命周期钩子（如created/mounted）中做判断：如果没有接收到传递的缓存数据，就发起Axios请求拉取详情，确保两种场景都能正常显示内容。

3. 进阶优化：全局缓存列表数据 #

如果想在更多场景复用列表数据，可以把列表存在状态管理工具（如Pinia/Vuex）中，这样即使直接访问详情页，也能先从缓存里匹配对应ID的数据，找不到再发请求：

Pinia示例：

// stores/postStore.js
import { defineStore } from 'pinia'
import axios from 'axios'

export const usePostStore = defineStore('posts', {
  state: () => ({
    postList: []
  }),
  actions: {
    async fetchPostList() {
      const res = await axios.get('/api/posts')
      this.postList = res.data
    },
    getPostById(id) {
      return this.postList.find(post => post.id === id)
    }
  }
})

详情页中使用缓存：

import { usePostStore } from '@/stores/postStore'
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const store = usePostStore()
    const route = useRoute()
    const currentPost = ref(null)

    onMounted(async () => {
      // 先从缓存找
      const cachedPost = store.getPostById(route.params.id)
      if (cachedPost) {
        currentPost.value = cachedPost
        return
      }
      // 缓存里没有，先检查列表是否已加载
      if (store.postList.length === 0) {
        await store.fetchPostList()
        const post = store.getPostById(route.params.id)
        currentPost.value = post || await fetchDetail(route.params.id)
      } else {
        currentPost.value = await fetchDetail(route.params.id)
      }
    })

    async function fetchDetail(id) {
      const res = await axios.get(`/api/posts/${id}`)
      return res.data
    }

    return { currentPost }
  }
}

内容的提问来源于stack exchange，提问作者kralyolda