路由信息对象Route之属性query和params的区别

query的使用

第一步：在<router-link/>标签中配置如下

<router-link :to="{name:'beijing',query:{id:1,user:'lisi'}}">看电影</router-link>

第二步：在路由规则中配置（导航）

{name:'beijing',path:'/beijing',component:BeiJing}

第三步：在路由对应的组件created函数中输出内容

this.$route   //全部内容（object）

this.$route.query.id   //参数

查看在url中的路径

http://localhost:8080/move?id=1&user=lisi

 

params的使用

第一步：在<router-link/>标签中配置如下

<router-link :to="{name:'beijing',params:{id:2,user:'zousaili'}}">听音乐</router-link>

第二步：在路由规则中配置（导航）

{name:'beijing',path:'/beijing/:id/:user',component:BeiJing}

第三步：在路由对应的组件created函数中输出内容

this.$route   //全部内容（object）

this.$route.params.id  //参数

查看在url中的路径

http://localhost:8080/music/2/zousaili