美文网首页
vue router路由跳转params和query的区别

vue router路由跳转params和query的区别

作者: 阿金的故事 | 来源:发表于2018-05-15 14:27 被阅读0次
    1. query方法:相当于用get方法传递参数,query里的参数放到url里,在地址栏可见。
      eg:
      点击事件里加入:
    this.$router.push({ path:'demo/demo1',query:{name:item.name,time:item.time}});
    

    跳转页接收参数:

    this.$route.query.name
    this.$route.query.time
    

    2.params方法:相当于post方法传递,放到body里,参数不放在地址栏,不可见。

    this.$router.push({ name:'demo1',params:{name:item.name,time:item.time}});
    

    跳转页面接收参数:

    this.$route.params.name
    this.$route.params.time
    

    注意这里的name取得是定义路由的时候起的名字,如下:

    import Router from 'vue-router'
    Vue.use(Router)
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/demo/demo1',
          name: 'demo1',//这里的name就是params要依据的name
          component: demo1
        }
    })
    

    相关文章

      网友评论

          本文标题:vue router路由跳转params和query的区别

          本文链接:https://www.haomeiwen.com/subject/irgedftx.html