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

  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的区别)