17.VUE_ query传参和params传参的区别

1.query字符串传参

路由：

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

导航：

    <router-link to="/login?id=10&name=zs">登录</router-link><router-link :to={path:'register',query:{id:5,name:'lili'}}>注册</router-link>//等同于：router.push(‘/login?id=10&name=zs’)router.push({path:'register',query:{id:5,name:'lili'}})**注意：**在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。this.$router.push(‘/login?id=10&name=zs’)this.$router.push({path:'register',query:{id:5,name:'lili'}})

注意：jquery可以通过name或path来引入路由

2.params路径传参

路由：

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

导航：

<router-link to="/login/12/ls">登录</router-link>
<router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>

注意：params只能通过name来引入路由，path会undefined

jquery传参和params传参的区别

用法上:

1. 上文已经提到query可以用name或path来引入
2. params必需要用name来引入，接收参数都是类似的，分别是this.route.query.name和this.route.params.name。

地址栏表现形式上:

query：

params：

（注意：这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失）