vue路由传参方式的几种区别（个人理解）

路由配置片段

{
path:'gameContent',
name:'gameContent',
meta:{title:'竞赛详情'},
component: () => import('./views/GameContent') ,
redirect:'gameContent/details',
children:[
{
path:'details',
name:'details',
meta:{title:'竞赛详情'},
component: () => import('./components/gameContents/Details') ,
}
]
}

传参方式

const item = {
id: 123,
name: 'zj'
}

<!-- query这种传参方式 1. 浏览器url路径能够看到参数 2. 刷新页面后参数不会丢失-->
<router-link slot="title" :to="{name:'gameContent', query:{teamId:item.id}}">跳转</router-link>

<!-- query这种传参方式 1. 浏览器url路径能够看到参数 2. 刷新页面后参数不会丢失-->
<!-- <router-link slot="title" :to="'gameContent/details?teamId='+item.id">跳转</router-link> -->

<!-- params这种传参方式 1. 浏览器url路径看不到参数 2. 刷新页面后参数就会丢失 3. name值必须精确到最后代的路由，这里是 'details'-->
<!-- <router-link slot="title" :to="{name:'details', params:{teamId:item.id}}">跳转</router-link> -->

<!-- params这种传参方式，1. 浏览器url路径能够看到参数; 2. 刷新页面后参数不会丢失 3. 路由配置中的 path必须更改为  path:'details/:teamId';-->
<!-- <router-link slot="title" :to="'gameContent/details/'+item.id">跳转</router-link> -->