2021-04-06vue中this.$route.query和this.$route.params & query传参和params传参的使用和区别

参考：https://blog.csdn.net/weixin_44867717/article/details/109773945

query传参：

1、路由

 var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { name:'register',path: '/register', component: register } 
      ]
    })

2、导航

// 注意：这是 query 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
    <router-link to="/login?id=10&name=zs">登录</router-link>
    <router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link>
    或
    <router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link>
    
等同于：
    this.$router.push('/login?id=10&name=zs')
    this.$router.push({path:'/register',query:{id:5,name:'lili'}})
    或
    this.$router.push({name:'register',query:{id:5,name:'lili'}})

params传参：

1、路由

var router = new VueRouter({
      routes: [
        { path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id/:name） 刷新页面 参数会消失,页面中就丢失了数据
        { name:'register', path: '/register/:id/:name', component: register }
      ]
    })

2、导航

// 注意：这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
    <router-link to="/login/12/ls">登录</router-link>
    <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
    
等同于：
    this.$router.push('/login/12/ls')
    this.$router.push({name:'register',params:{id:10,name:'lili'}})

接收参数

// query通过this.$route.query接收参数
created () {
    const id = this.$route.query.id;
}
 
// params通过this.$route.params来接收参数
created () {
    const id = this.$route.params.id;
}