vue 之路由跳轉及傳參


   vue 之路由跳轉有:

   1、 this.$router.push進行編程式路由跳轉

    2、 router-link 進行頁面按鈕式路由跳轉

  vue 之路由傳參有:

    1、 this.$route.params獲取路由傳遞參數

    2、this.$route.query獲取路由傳遞參數

    區別: params 和 query 都是傳遞參數的,params不會在url上面出現,並且params參數是路由的一部分,是一定要存在的 query則是我們通常看到的url后面的跟在?后面的顯示參數

 vue 之路由跳轉及傳參示例:

    .使用router-link進行路由導航,傳遞參數

     父組件:

     

  子組件中:使用this.$route.params.num來接收路由參數

     

    路由配置文件中:在路徑綁定num參數

     

   地址欄中:

 

 二、直接調用$router.push 實現攜帶參數的跳轉:  

     父組件中模板渲染中調用函數,傳遞參數

     
 
  子組件中:使用 this.$route.params.id  獲取參數
     

 路由配置文件中:id用來為參數占位

     
 

    地址欄中

        

 

三、通過路由屬性中的name來確定匹配的路由,通過params來傳遞參數:使用name來匹配路由

     

    子組件中:依然使用 this.$route.params.id  接收參數

     
  路由配置文件中: 使用name配置
    
  地址欄中:不顯示參數
   

四、使用path來匹配路由,然后通過query來傳遞參數,這種情況下 query傳遞的參數會顯示在url后面?id=?

     父組件中:使用query來傳遞參數

     
 

  子組件中:使用 this.$route.query.id來接收參數

    
 
   路由配置文件中:
   
 

   地址欄中:

    

 

 







免責聲明!

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



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