web前端-vue.js 通过路由传递参数id查询详情列表

Posted 2021-12-28 MinggeQingchun

1、路由跳转页面，传递userId参数

methods: 
    openDetails (row) 
        //具体操作
        console.log(this.$route ,"----当前页面的url信息----");
        //this.$router.push("/user/detail/detaildata/" + row.userId);
        console.log("row.userId::::" + row.userId);
        this.$router.push(
        
          //path:'/user/detail/detaildata/',  使用path路径注意路径要正确
          name: 'detaildata',
          query: 
            userId:row.userId
          
        );
    

2、导入上一页面

<script>
import user from "./user.vue";

3、跳转的页面设置参数，在data 中 定义userId

export default 
  name: "UserDetail",
  components: 
  ,
  data() 
    return 
      userId: null
    
  

4、在当前页面加载时获取获取这个userId参数

created() 
    console.log(this.$route ,"----userDetail当前页面的url信息----");
    this.userId = this.$route.query.userId;
    console.log("this.$route.query.userId:" + this.$route.query.userId);
    console.log("this.userId:" + this.userId);
    this.getList();
,