今天,算是真正認識了params傳參,為什么說params傳參引起了血案?
起因是這樣的,我正在做一個登陸的模塊,公司想根據url不同的參數來區分是什么類型的會議,
於是后端推薦我用params傳參的方式來實現這一設計,於是我毫不猶豫的在longin的路由上加上了params參數:
path: "/:order",
name: "index",
component: () =>
import(/* webpackChunkName: "about" */ "./pages/index.vue"),
注意,我在path上加上了params參數
http://localhost:8090/bb
我這樣訪問了頁面,這個bb是我隨便寫的參數,對應的是order
然后我在這一頁跳到了另一個頁面
http://localhost:8090/com2
該頁面路由配置如下:
{
path:'/com2',
name:'com2',
component:()=>
import('./components/com1.vue')
},
然后我在這頁面上隨意的刷新了一下!!!!
結果跳到了剛才那個頁面,也許很多大佬已經發現了問題所在,但是我卻蒙了。。。
我一直把params當成了一種路由傳參的方式,其實就是傳參,但是它還有一個作用就是動態路由。。
this.$router.push({name:"com2"})
上面的方式雖然可以跳到一個新的頁面,但是在我刷新的時候,注意url路徑是這樣的
http://localhost:8090/com2
我卻回到了和http://localhost:8090/bb一樣的頁面,
原因是router將com2當成了/路徑的params參數,所以回到了和http://localhost:8090/bb一樣的頁面,
大佬們稱這種為動態路由,我卻一下子沒轉過彎,整了半天。
哪種不能其它頁面都不能刷新了吧,
於是我在默認路徑上加上了第二個params參數
path: "/:order/:lang",
這樣,我在http://localhost:8090/com2頁面刷新時就不會跳到跟頁面了,原因是,我想跳到跟頁面必須是/aa/bb這樣的格式,路由匹配不上跟頁面,所以就避免了上述問題。