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> -->