vue-router

路由传参(query与params)

query传参:

//传参 
this.$router.push({
    name:'index',
    push:'index',
    query:{
      id:'314926',
      name:'张三'
    }
})

//组件接收
this.abc = this.$route.query        //abc值为{id='314926',name:'张三'}

params传参:

//传参
this.$router.push({
    path:'/index'                //path 可以不写
    name:'index',
    params:{
      id:'000001',
      name:'老王'
    }
})
//接收
this.obj = this.$route.params    // obj的参数 {id:'000001',name:'老王'}

//路由配置
{
  path:'/index/:id/:name',       // 配置路由地址, 刷新页面数据不会丢失
  name:'second',
  component:()=>import('@/view/index')
}

两者的区别:

query传参: 浏览器url 展示,query参数对象.

params传参: 浏览器url 不展示, 但是 配置路由参数 浏览器url展示params参数对象中所有的值.