vue路由传参方法汇总--path/name

path:路径
name：组件名

1.1、path

// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo

1.2、path+query/name+query

query传参的时候，以path，name效果一样

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
router.push({ name: 'register', query: { plan: 'private' } })

2.1、name+params

// params 不能与 path 一起使用
router.push({ path: ‘/user’, params: { username } }) // -> /user

router.push({ name: 'user', params: { username } })

// 命名的路由，并加上参数，让路由建立 url  不显示参数
router.push({ name: 'user', params: { username: 'eduardo' } })

2.2、name+query

router.push({ name: 'register', query: { plan: 'private' } })

1.3、path+动态路由

router.push({path:'/home/details/'+id})

1、路由表中添加

{
      path: 'details/:id',
      component: () => import(组件路径),
    }

2、在跳转中
函数：

getDetails(id){
      console.log('hhhhh');
      this.$router.push({path:'/home/details/'+id})
      // router.push('/details');
    }