路由傳參


1.query方式傳參和接收參數

//傳參: 
this.$router.push({
        path:'/teacher/edit',
        query:{
          id:id
        }
      })
  
//接收參數:
this.$route.query.id

注意:傳參是this.$router,接收參數是this.$route,這里千萬要看清了!!!

this.router 和this.router和this.route有何區別?
在控制台打印兩者可以很明顯的看出兩者的一些區別:

clipboard.png

  • router為VueRouter實例,想要導航到不同URL,則使用route**rVueRouter實例,想要導航到不同URL,則使用router.push方法
  • $route為當前router跳轉對象,里面可以獲取name、path、query、params等

2.params方式傳參和接收參數

  • 配置路由格式:/teacher/edit/:id
  • 傳遞后形成的路徑:/teacher/edit/1

router-link方式

	 <template slot-scope="scope">
          <router-link :to="'/teacher/edit/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button
          >
          </router-link>     
 </template>

to前要加冒號:,表示單向綁定

代碼方式切換

//傳參: 
this.$router.push({
        name:'xxx',    //路由配置的name屬性
        params:{
          id:id
        }
      })
  
//接收參數:
this.$route.params.id

注意:params傳參,push里面只能是 name:'xxxx',不能是path:'/xxx',因為params只能用name來引入路由,如果這里寫成了path,接收參數頁面會是undefined!!!


免責聲明!

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



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