vue-router 項(xiàng)目中$route.params和$route.query的區(qū)別是什么，踩坑事件進(jìn)行總結(jié)

你路由上的path的參數(shù)名和params傳的參數(shù)名不相同導(dǎo)致的

好吧，這個(gè)問(wèn)題在同事的幫助下很快解決了；

---------------------------分割線--------------------------------------

思考一個(gè)問(wèn)題，什么情況下，tab標(biāo)簽頁(yè)下方應(yīng)該顯示高亮？

查看資料后，給出了這樣一句話：當(dāng)目標(biāo)路由成功激活時(shí)，鏈接元素自動(dòng)設(shè)置一個(gè)表示激活的 CSS 類名。 由此可見，出現(xiàn)該問(wèn)題是因?yàn)?，目?biāo)路由沒有被成功激活

目標(biāo)路由實(shí)際上應(yīng)該是下面這樣：

可以看到錯(cuò)誤的路由與目標(biāo)路由差了一個(gè)這樣的字符串 ?accesstoken=1234， 如果去掉了這個(gè)字符串，問(wèn)題就能完美解決了

怎樣去掉這個(gè)多余的字符串呢？我們看一下，添加該字符串的代碼是這樣寫的：

然后我們把這段代碼改成這樣：

好了，tab標(biāo)簽頁(yè)下面的高亮又能正常顯示啦 !!!

思考一個(gè)問(wèn)題，為什么把query 改成 params就能讓路由正確顯示呢？這就得看一下$route.params和$route.query的區(qū)別了

共同點(diǎn)：都是為了在界面跳轉(zhuǎn)的時(shí)候進(jìn)行傳參

不同點(diǎn)：

（1）接收參數(shù)，
query和route 分別是 this.$route.params.accesstoken, this.$route.params.accesstoken, 注意是$route 而不是 $router 哦
（2）瀏覽器地址欄中的顯示
使用 query 參數(shù)在瀏覽器地址欄中顯示，而使用 params的時(shí)候參數(shù)不會(huì)在地址欄中顯示?？梢赃@樣理解，query更像是ajax中的get方法，而params則更加類似于post方法

---------------------------------------分割線-------------------------------------

但是，

當(dāng)我們使用后params之后， 只有第一次進(jìn)入頁(yè)面才能拿到token， 刷新頁(yè)面或者頁(yè)面跳轉(zhuǎn)后就再也拿不到token了

什么原因呢？

原來(lái)是： 使用params傳參的時(shí)候，當(dāng)你跳到別的頁(yè)面或者刷新頁(yè)面的時(shí)候參數(shù)會(huì)丟失

解決辦法？

cookie , vuex

我記得 通過(guò)params傳到參數(shù)一刷新頁(yè)面就沒了，而通過(guò)query顯示在url后面刷新之后也不會(huì)影響

錯(cuò)別字好多。