vue带参数跳转到详情页并接收参数

在Vue中，你可以使用`this.$router.push()`方法来进行带参数的路由跳转，并且可以在目标组件（详情页）中通过`props`接收这些参数。下面是一个简单的示例：

首先，在你的Vue组件（比如`DetailComponent.vue`）里，需要定义一个`props`来接收参数：

<template>
  <div>
    <!-- 这里是详情页面的内容 -->
    <h1>详情 - {{ params.title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true } // 接收标题参数
  }
}
</script>

然后，在你的导航守卫（如`router.js`）或者某个点击事件处理函数中进行跳转：

import Vue from 'vue'
import Router from 'vue-router'

// 其他导入...

export default new Router({
  routes: [
    {
      path: '/detail/:id', // 定义详情页路由，`:id`是动态参数
      component: DetailComponent,
      name: 'detailPage',
      props: true // 设置允许传递props
    },
    // 其他路由...
  ]
})

// 或者在某个按钮的点击事件中：
this.$router.push({ name: 'detailPage', params: { id: '参数值' } })

在上述例子中，当你访问`/detail/123`这样的URL时，`id`参数就会传入到`DetailComponent`的`title`属性上。