Vue路由传参的两种方式query和params

1.  不带参数
  
this.$router.push('/home')

this.$router.push({name:'home'})

this.$router.push({path:'/home'})


2. query传参 

this.$router.push({name:'home',query: {id:'1'}})

this.$router.push({path:'/home',query: {id:'1'}})


// html 取参  $route.query.id

// script 取参  this.$route.query.id

 
3. params传参
 
this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name

  
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,

// 不配置path ,第一次可请求,刷新页面id会消失

// 配置path,刷新页面id会保留
  

// html 取参  $route.params.id

// script 取参  this.$route.params.id

二、 this.$router.replace() (用法同上,push)
三、query和params区别与总结：

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传.

params传参如果在router的path里面加上/:id,地址栏会显示url/id,如果router里不加，地址栏不会显示参数，刷新参数会消失，可以传比较重要且只能使用一次的参数。