Vue如何在删除router配置的name属性后，还能使用params 传参呢

如何在删除vue-router的name后还使用params 传参呢

先来看一下需求：

有一个路由，该路由下面有子路由,代码看起来是这样的：

{
    path:'/user/:id',
    name:'User'
    component:() => import ('../views/User'),
    children:[
      {
        path:'BaseInfo',
        name:'BaseInfo',
        component:BaseInfo
      }
    ]

},

需求就是，我需要在点击用户头像后进入用户个人中心后默认显示个人基础信息的路由组件，那么这个路径看起来是这个样子:

http://localhost:8081/user/1590837172

---

既然要使用 user/1590837172 params的方式来避免 query丑陋的 user?id=1590837172

那我想到的是在用户头像的地方设置跳转： （同时配合上路由配置中的name）

<router-link :to="{name:'User',params:{id:user.id}}">
	<img src="xxx.png" />
</router-link>

或者事件跳转方式：（等价）

<img src="xxx.png" @click="$router.push({name:'User',params:{id:user.id}})"/>

然后我想要子路由默认显示：（官方说提供一个空的子路由即可，其实是空的路径）

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})

那么问题来了，恭喜你喜提一串 warn

这句话的意思是：

叫做’User’的路由有一个默认的子路由，当导航到叫这个name的路由的时候（:to={name:‘User’}）,这个默认的子路由将不会被渲染，移除掉这个name （‘User’），你才能万事大吉

---

然后我当时就W , t , f ******* ，我要是把这个name 删掉了，那我怎么在push路由的时候使用params，难道我得使用push path？？？ ↓ ↓ ↓

<router-link :to="{path:'/user',params:{id:user.userId}}">
    <img :src="avatar" />
</router-link>

那不好意思，你又喜提一串错误，所以还是不行。…

众所周知，如果提供了 path，params 会被忽略，（官方原话）

---

思考了好一会儿，才突然想起，归根揭底 params就是一串字符串，那么我可以这样：

<router-link :to="{path:'/user/' + user.userId}">
    <img :src="avatar" />
</router-link>

是因为 /user/ 后面的字符串是作为一个整体来进行渲染 User这个组件的，/user/.../ ,所以你在...的位置无论传啥都动态的绑定到了设置的占位符 :id上面去了（params）