vue router使用query和params传参的使用和区别

一、params、query是什么?

  • params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params
  • query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

1、用法上的
query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.namethis.$route.params.name

注意接收参数的时候,已经是 $route 而不是$router了哦!!

2、展示上的
区别:

  • query更加类似于我们ajax中get传参,params则类似于post

二、写法如下

//params方式
methods:{
      clickme:function(){
        this.$router.push({this.$router.push({ name: 'user', params: { id: 'user', name: 'user', age: 'John' }
,query: { id: 's', name: 'ss', age: 'John' }})
      }
    }

注意:路由设置这里,当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。(例如:params的name与id必须与路由匹配,否则无效果)。并且当你跳到别的页面后刷新页面的时候params参数会丢失,那依赖这个参数的http请求或者其他操作就会失败。

//query方式
methods:{
      clickme:function(){
        this.$router.push({ path: '/user/1', query: { id: 'user', name: 'John', age: 'John' }})
      }
    }

三、实例如下

//home.vue


//router/index.js
const routers= new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        { path: 'index', name:'index', component: Index },
      ]
    },
    {
      path: '/about',
      component: About
    },{
      name:'user',
      path: '/user/:id',
      component: User
    }
  ]
});

你可能感兴趣的:(vue router使用query和params传参的使用和区别)