美文网首页
Vue Router 的params和query传参的区别

Vue Router 的params和query传参的区别

作者: 韭菜过敏者 | 来源:发表于2018-12-06 15:13 被阅读0次

    首先简单来说明一下: router和route的区别

    router : 是路由操作对象,只写对象,route : 路由信息对象,只读对象

    //操作 路由跳转
    this.$router.push({
          name:'hello',
          params:{
              name:'word',
              age:'11'
         }
    })
    
    //读取 路由参数接收
    this.name = this.$route.params.name;
    this.age = this.$route.params.age;
    

    1·跳转方式:query传参,使用name,path跳转;params只能用name跳转

    //query传参,使用name跳转
    this.$router.push({
        name:'second',
        query: {
            queryId:'20180822',
            queryName: 'query'
        }
    })
    
    //query传参,使用path跳转
    this.$router.push({
        path:'second',
        query: {
            queryId:'20180822',
            queryName: 'query'
        }
    })
    
    //params传参 使用name
    this.$router.push({
      name:'second',
      params: {
        id:'20180822',
         name: 'query'
      }
    })
    

    2.接收参数

    //query传参接收
    this.queryName = this.$route.query.queryName;
    this.queryId = this.$route.query.queryId;
    
    //params接收参数
    this.id = this.$route.params.id ;
    this.name = this.$route.params.name ;
    

    3.路由

    //query
    {
    path: '/second',
    name: 'second',
    component: () => import('@/view/second')
    }
    
    //params
    {
    path: '/second/:id/:name',
    name: 'second',
    component: () => import('@/view/second')
    }
    或者
    //刷新后得不到数据,不建议使用
    {
    path: '/second',
    name: 'second',
    component: () => import('@/view/second')
    }

    相关文章

      网友评论

          本文标题:Vue Router 的params和query传参的区别

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