vue路由传参及获取参数的方式总结

//路由配置
{
      path: '/user/:username/:post_id',
       name: 'User',
       component: User
 }

//跳转
    this.$router.push({
          path: `/user/${username}/${post_id}`,
    })

//获取参数
this.$route.params.username
this.$route.params.post_id

//路由配置
{
      path: '/user',
       name: 'User',
       component: User
 }

//js跳转
    this.$router.push({
          name: 'User',
          params: {
            id: id
          }
    })

<!--html跳转-->
<router-link :to="{name:'User',params:{id:3}}"><span>跳转</span></router-link>

//路由配置
{
      path: '/user',
       name: 'User',
       component: User
 }

//js跳转
    this.$router.push({
           path: '/user',
          query: {
            id: id
          }
    })

<!--html跳转-->
<router-link to="/user?id=1"><span>跳转</span></router-link>

this.$router.push({name:'list', params:{id: id}});
routes: [
    {
      path: '/list/:id',
      name: 'list'
    }
  ]

this.$router.push({path: '/folder/file', query: {id: list.id, name: list.name}})