vue刷新子頁面,跳到主頁,params傳參引起的血案!


今天,算是真正認識了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這樣的格式,路由匹配不上跟頁面,所以就避免了上述問題。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM