首页 > 其他 > 详细

vue的路由参数传递和获取路由参数

时间:2019-05-10 13:35:54      阅读:842      评论:0      收藏:0      [点我收藏+]

1.在路由中配置path, 形式:path:"/xxx/:param" , 斜线+冒号+参数

 {
      name:"Blog",
      component:Blog,
      path:"/blog/:id"
    },

2.在router-link标签用to绑定路由,:to="  ‘/blog/‘+param " ,路由部分要加单引号

 <div class="box" v-for="(item,i) in getSearch">
        <router-link :to="‘blog/‘+(i+1)">
        <h3>{{item.title}}</h3>
        <p>{{item.body}}</p>
        </router-link>
    </div>

3.获取路由参数

点击带有参数的路由,地址栏会带有对应的参数:

技术分享图片

 

获取这个参数,然后通过接口传递给后台,返回对应参数的数据,this.$route.params.xxx

  created() {
    this.$axios
      .get("http://jsonplaceholder.typicode.com/posts/" + this.$route.params.id)
      .then(res => {
        console.log(res);
        this.blog = res.data;
      });
  }

 

vue的路由参数传递和获取路由参数

原文:https://www.cnblogs.com/luguankun/p/10843783.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!