我懂你的需求——就是想让MeComponent不管是在路由里渲染还是单独拿出来复用，都能通过props接收user，而不是依赖$route.params，这样组件的复用性才拉满对吧？其实很简单，分两步就能搞定：

第一步：配置路由时开启props映射 #

首先得在你的路由配置里给Me路由加上props: true，这样Vue Router会自动把路由的params参数映射成组件的props，不用你在组件里手动去$route.params里扒数据：

// 你的路由配置文件，比如router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import MeComponent from '@/components/MeComponent.vue'

Vue.use(VueRouter)

const routes = [
  // 其他路由...
  {
    name: 'Me',
    path: '/me',
    component: MeComponent,
    props: true // 关键！开启params到props的自动映射
  }
]

const router = new VueRouter({
  routes
})

export default router

要是你需要更灵活的映射（比如只传特定参数，或者对参数做转换），可以用函数式的props：

{
  name: 'Me',
  path: '/me',
  component: MeComponent,
  props: (route) => ({
    user: route.params.user,
    // 还可以加其他自定义props
    test: route.params.test
  })
}

第二步：$router.push时正常传params #

你之前的push调用其实不用改太多，保持传params就行，因为路由已经帮你把params转成props了：

<a href="#" v-on:click.prevent="$router.push({name: 'Me', params: { user: user, test: 1 }})" class="pure-menu-link">Me</a>

这时候你的MeComponent里的props: ['user']就能直接拿到值了，组件里直接用this.user就行，完全不用碰$route.params！而且当你在路由外面用这个组件时，直接写<MeComponent :user="someUser" />也完全没问题，完美复用~

小提醒 #

如果你的user是复杂对象，用params传递的话，页面刷新后数据会丢失（因为路由参数本质是URL的一部分，没法存复杂对象）。如果需要刷新后还能保留，那建议传用户ID，然后在组件里根据ID去请求数据，这样更稳妥。

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