1.query传参：

路由：

let router = new VueRouter({
    router:[
        {path:'login',component:login},
        {path:'register',name:'register',component:register}
    ]
}

导航：

//注意:这是query两种传参方式 一种是直接跳转吧字符串传过去，一种是传描述目标位置的的对象
<router-link to:'/login?id=10&name=lym'>登录</router-link>
<router-link :to:"{path:'/register',query:{id:5,name:"lym"}}">注册</router-link>
或
<router-link :to:"{name:'register',query:{id:5,name:"lym"}}">注册</router-link>

同于：
this.$router.push('login?id=10&name=lym')
this.$router.push('{path:'/register',query:{id:5,name:'lym'}}')
this.$router.push('{name:'register',query:{id:5,name:'lym'}}')

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

 query获取参数：

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

 2.params传参

路由：

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

导航：

//注意：这是params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
<router-link to:'/login/12/lym'>登录</router-link>
<router-link :to:'{name:'register',params:{id:10,name:'lym'}}'>注册</router-link>

等同于：
this.$router.push('/login/12/lym')
this.$router.push({name:'register',params:{id:10,name:'lym'}})

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

params获取参数：

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

3.切换路由

//query通过path切换路由
<router-link :to="{path:'/Index',query:{id:1}}">go Index页面</router-link>
//params通过name切换路由
<router-link :to="{name:'Index',params:{id:1}}">go Index页面</router-link>

 

二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，浏览器刷新页面不会消失,而params相当于post请求，参数不会再地址栏中显示。