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

以我现在的知识,我认为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

Logo

前往低代码交流专区

更多推荐