VUE-vue-router,路由跳转传递参数，params和query传递参数的区别

vue-router传递参数主要有两种方式：

一.params:

1.基本使用

• 配置路由格式：/details/:id
• 传递的方式：a.在path后面拼接上对应的值，'/details/'+id b.对象中的params属性
• 传递后在浏览器上形成的路径：/details/123
• 在路由中配置参数则刷新页面参数不丢失，若不配置刷新页面参数丢失

注意：使用params传参时必须使用name引入路由，若用path则会忽略params中的数据、

2.如何传参与获取参数

声明式导航

• 普通跳转

<router-link to='/details'></router-link>

• 跳转时传递参数

<router-link :to="'/details/'+id"></router-link>
<router-link :to='{name:'details',params:{id:1}}'></router-link>

编程式导航

•  普通跳转 

// 字符串
this.$router.push('details')
// 对象
this.$router.push({path:'details'})
this.$router.push({name:'details'})

• 跳转时传递参数

用params传递参数时，只能用name来引入路由(如果提供了path,params会被忽略)

// 方式一：
this.$router.push(
    {
     name:'details',
     params:{
        id:1,
        name:'lily'
        }
    }
)
// details/1/lily

// 方式二：
this.$router.push(`/details/${id}/${name}`)  // details/1/lily

this.$router.push(
    {
        path:'details',
        params:{}
    }
)
// 这里的params不生效  /details

接受参数

注意：接受参数时是route,不是router

this.$route.params.id
this.$route.params.name

2.query:

• 配置路由格式：/details  (普通配置)
• 传递的方式：使用对象中的query属性传递参数，{path:/details,query:{name:'lily',age:18}}
• 传递后在浏览器上形成的路径：/details?name='lily'&age=18
• 刷新页面参数不丢失

声明式导航

<router-link :to='{path:'/details',query:{name:'lily',id:1}}'></router-link>

编程时导航，跳转时传递参数

this.$router.push(
  {
//  name:'details'
    path:'/details',
    query:{
        id:1,
        name:'lily'
        }
  }
)
// details?id=1&name=lily

接受参数

this.$route.query.id
this.$route.query.name

总结：

	params	query
配置	path:'/details/:id' name:'details'	path:'/details' name:'details'
传参	{name:'details',params:{id:01}}	{name:'details',query:{name:'lily'}}
读参	$route.params	$route.query
显示的url	/details/01	/details?name=lily
刷新参数是否丢失	加参数配置/details/:id不丢失 普通配置/detail 会丢失	不丢失