在需要跳转的地方使用 return this.$router.push()

(return 一定要写上,别漏了)

方法一(不带参数跳转,直接跳转到相应界面)

push({ })提供多个属性,使用name:‘XX’ 则XX对应router路由中定义的name
在这里插入图片描述
这里的name是router/index.js定义好的名称
在这里插入图片描述

直接复制代码块↓

 return this.$router.push({name: 'XXXX'})

方法二(带参数名+参数值跳转)

拼接方式:projects/task-instance?pageSize=10&pageNo=1&searchVal=test_mysql-pgsql=

在这里插入图片描述
复制代码:

  return this.$router.push({
                    name: 'task-instance',
                    query: {'pageSize': 10,
                        'pageNo':1,
                        'searchVal':item.collectConfName
                    }
                })

效果:
在这里插入图片描述

方法三(带参数值跳转)

这种拼接url方式就是 CreateComponents/12345 (componentId是12345)

第一种写法(用组件名称)
 this.$router.push({name: 'CreateComponents', params: {componentId}})


第二种写法(用组件路径)
 this.$router.push(`/basic-comp-mgt/comps-detail/${componentId}`)

这三种都是一样的实现方法,只是根据需求使用不同的属性去跳转。

Logo

前往低代码交流专区

更多推荐