vue的获取参数方式 this.$route.params和this.$route.query的区别

Vue: this.$route.params和this.$route.query的区别

下面是vue的跳转三种传参方式以及获取参数

第一种：直接使用 “/” 拼接 /index/project/1(1就是id)
在router/index.js
提前定义路由

{
	    path:'/mtindex',
	    component: mtindex,
	    //添加路由
	    children:[
		     {
		     	path:"/detail/:tableId(\\d+)", // 如果是在 url 后面带参数 就是 加上 :参数名称(\\d+)  如果是使用 push 方式 就不需要带参数了 因为直接 push方法里面 params 指明即可
		     	name:'detail',// dom定位
		     	component:guessdetail
		     }
	    ]
}   	

// 传递参数 name 对应定义的name
点击事件方式：
this.$router.push({name: ‘detail’, params:{tableId: item.id}});

router-link方式：
<router-link :to="{name:'detail',params:{tableId: item.id}}">详情</router-link>
<router-link :to="'/detail/'+item.id">详情</router-link>

url形式传参 http://localhost:8080/mtindex/detail/id
获取参数 this.$route.params.shopid

第二种：采用点击事件（这样参数不会出现在url上面，但是刷新页面 参数自动丢失 所以不推荐）
在router/index.js
提前定义路由
{
	    path:'/mtindex',
	    component: mtindex,
	    //添加路由
	    children:[
		     {
		     	path:"/detail",
		     	name:'detail',// dom定位
		     	component:guessdetail
		     }
	    ]
}  

在页面下方定义一个方法
/** 跳转添加考核题目方法 */
addVideoQuestionsIds()
{
      this.$router.push({
        name: "addVideoQuestionsIds",
        params: {
          ids: s,
          trainVideoId:this.trainVideoId,
          type:"addSubject"
        }
      });
}

第三种：参数是直接是以 "?" 问号拼接而成的
router-link方式：
<router-link :to="{name:'detail',query:{tableId: item.id}}">详情</router-link>
<router-link :to="'/detail?id='+item.id">详情</router-link>

点击方式：
在router/index.js
提前定义路由
{
	    path:'/mtindex',
	    component: mtindex,
	    //添加路由
	    children:[
		     {
		     	path:"/detail",
		     	name:'detail',// dom定位
		     	component:guessdetail
		     }
	    ]
} 
点击触发方法：
addVideoQuestionsIds()
{
      this.$router.push({
        name: "addVideoQuestionsIds",
        query: { // 注意这里是 "query"
          ids: s,
          trainVideoId:this.trainVideoId,
          type:"addSubject"
        }
      });
}
this.$router.push({name: ‘detail’, query:{shopid: item.id}});
this.$route.query 接收路由参数
url形式传参 http://localhost:8080/mtindex/detail?shopid=10&page=10&limit=20;
获取参数 let id= this.$route.query.id; 类似

综上所述 url的不同 采取获取的参数不同
最佳实践：如果多参数采用 query传参，一个获取两个参数 采用 params传参

如果你觉得这篇文章对你有所帮助，不妨点个赞呗，谢谢观看。