关于vue中带参数的页面之间跳转

客套话不多说，直接进入主题

以我现在的知识，我认为vue中页面之间的跳转都是通过路由router来跳转，即：

this.$router.push({path: '你要跳转的路由路径'})

在跳转中如果传递参数时有两种方法

（1）

this.$router.push({path:'你要跳转的路由路径',query:{paramName:paramValue}})

跳转过去用接收

this.$route.query.paramName

（2）

this.$router.push({name:'你要跳转的路由name'，params:{paramName:paramValue})

跳转过去用接收

this.$route.params.paramName

第一种传递有一种缺点就是你所传的参数会跟到url地址栏的后面，跟get请求还有点相似

第二种就不会有这种状况

这里给出案例

路由（router）：

{
    path: '/addRole',
    redirect: '/add/addRole',
    component: Layout,
    hidden: true,
    children: [{
      name: 'addRole',//新增角色
      path: '/add/addRole',
      component: () => import('@/views/role/addRole'),
      meta: {title: '新增角色',}
    }]
  }

在该页面跳转,跳转的方法：

      addRow(row) {
        this.$router.push({name: 'addRole', params: {row: row, title: '编辑角色'}})
        //this.$router.push({path: '/addRole', query: {row: row, title: '编辑角色'}})
      }

接收页面接收的方法，这里我写到了创建方法中，页面跳过来就一定会执行该方法：

    created: function () {
         console.log(this.$route.params)
      // console.log(this.$route.query)
    }

over