vue路由傳參的三種方式以及解決vue路由傳參頁面刷新參數丟失問題


  最近項目中涉及到跨頁面傳參數和后台進行數據交互,看到需求之后第一反應就是用路由傳參來解決;Vue中給我們提供了三種路由傳參方式,下面我們一個一個的來看一下:

  方法一:params傳參:

  

this.$router.push({
        name:"admin",
    //這里的params是一個對象,id是屬性名,item.id是值(可以從當前組件或者Vue實例上直接取) params:{id:item.id} })
//這個組件對應的路由配置 {
  //組件路徑 path:
'/admin',
  //組件別名 name:
'admin',
  //組件名 component: Admin, }

  通過params傳遞參數,如果我們想獲取id的 參數值,我們可以通過this.$route.params.id這種方式來打印出來就可以得到了;(注意:獲取參數的時候是$route,跳轉和傳參的時候是$router)

 

  方法二:路由屬性配置傳參:

this.$router.push({
        name:"/admin/${item.id}",
})       

//這個組件對應的路由配置
{
  //組件路徑
    path: '/admin:id',
  //組件別名
    name: 'admin',
  //組件名
    component: Admin,
}

  通過路由屬性配置傳參我們可以用this.$route.params.id來獲取到id的值,注意this.$router.push方法里面路徑帶的是值,路由配置項那里帶的是變量名(屬性名)來實現的對應;

  以上兩種傳參方式基本上可以理解為ajax中的post請求方式,參數都是不可見的,但是上面兩種方法都有一個弊端,就是當頁面刷新了是獲取不到參數值的,那么有沒有一種方法是頁面刷新之后參數依然存在呢?

 

  方法三:query傳參

  

this.$router.push({
        name:"/admin",
     query:{id:item.id} })
//這個組件對應的路由配置 {   //組件路徑 path: '/admin',   //組件別名 name: 'admin',   //組件名 component: Admin, }

  第三種方式是用query來傳參,這種方式是可以解決頁面刷新參數消失問題的,這種方式可以理解為是ajax中的get方法,參數是直接在url后面添加的,參數是可見的,所以解決頁面刷新參數消失問題建議使用方法三來解決;

  

  其實解決頁面刷新參數丟失問題的方案還有很多,比如把參數存在sessionStorange或者localStorange中都是可行的,不過我們既然用vue框架,就要用vue的方式來解決問題。這里只是想告訴大家,問題的解決方案可以多種多樣,要學會用多種方式或者說多種方案來解決一個問題,不要有太多的局限性!


免責聲明!

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



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