vue-router 项目中$route.params和$route.query的区别是什么，踩坑事件进行总结

Question

今天在$route.params和$route.query的区别 上踩了一个大大的坑
进入到列表页的时候显示下面这样

然而，正常情况下，我们需要显示成这样

显而易见，箭头指向的位置在第一张图片里没有高亮显示，这是为什么呢？

？？？？？？？？？？？？不知道其他小伙伴们有没有在这个地方踩过坑，欢迎在此留言

Answer 1

好吧，这个问题在同事的帮助下很快解决了；

---------------------------分割线--------------------------------------

思考一个问题，什么情况下，tab标签页下方应该显示高亮？

查看资料后，给出了这样一句话：当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 由此可见，出现该问题是因为，目标路由没有被成功激活

目标路由实际上应该是下面这样：

可以看到错误的路由与目标路由差了一个这样的字符串 ?accesstoken=1234， 如果去掉了这个字符串，问题就能完美解决了

怎样去掉这个多余的字符串呢？我们看一下，添加该字符串的代码是这样写的：

然后我们把这段代码改成这样：

好了，tab标签页下面的高亮又能正常显示啦 !!!

思考一个问题，为什么把query 改成 params就能让路由正确显示呢？这就得看一下$route.params和$route.query的区别了

共同点：都是为了在界面跳转的时候进行传参

不同点：

（1）接收参数，
query和route 分别是 this.$route.params.accesstoken, this.$route.params.accesstoken, 注意是$route 而不是 $router 哦
（2）浏览器地址栏中的显示
使用 query 参数在浏览器地址栏中显示，而使用 params的时候参数不会在地址栏中显示。可以这样理解，query更像是ajax中的get方法，而params则更加类似于post方法

---------------------------------------分割线-------------------------------------

但是，

当我们使用后params之后， 只有第一次进入页面才能拿到token， 刷新页面或者页面跳转后就再也拿不到token了

什么原因呢？

原来是： 使用params传参的时候，当你跳到别的页面或者刷新页面的时候参数会丢失

解决办法？

cookie , vuex

Answer 2

错别字好多。

Answer 3

我记得 通过params传到参数一刷新页面就没了，而通过query显示在url后面刷新之后也不会影响

Answer 4

你路由上的path的参数名和params传的参数名不相同导致的

Answer 5

在router.js中对应的路由进行如下设置，这样刷新后就不会出现参数丢失

path: 'equipment/:id',