一:路由跳转

1、router-link跳转

1)<router-link to="/official"></router-link>
2)<router-link to="{name:'Myofficial'}"></router-link>
3)<router-link to="{name:'Myofficial',path='/official'}"></router-link>

路由跳转和传参详解

2、js的push方法

1)this.$router.push('/personCenter')
2)this.$router.push({name:'PersonCenter'})
3)this.$router.push({name:'PersonCenter',path:'/personCenter'})

路由跳转和传参详解

二:路由跳转传参

1、显示传参

针对于需要展示的参数,便于区分,需要展示给用户看的
方式一:需要配置路由的一种,如图效果展示
路由跳转和传参详解

  • router-link法

    <router-link to="/official/edit/2"></router-link>
    路由跳转和传参详解

  • js 的push方法
    this.$router.push(/official/edit/${this.page})
    路由跳转和传参详解
    注意:以上两种路由都需要提前配置,如图所示的index.js
    路由跳转和传参详解

接受方:console.log(this.$route)
路由跳转和传参详解

方式二:不需要额外配置路由的一种,如图效果展示
展示如下:
路由跳转和传参详解

this.$router.push({name:'EditProject',query:{page:this.page}}) //出了用name也可以用path 指定路由匹配,当然也可以都写
路由跳转和传参详解
或者this.$router.push(official/edit?id=${row.id}) (和上面的方式效果一样)
路由跳转和传参详解

这个是路由的书写,如下图所示路由跳转和传参详解
接收方:console.log(this.$route) 用query 和直接在url尾部加都是这样的输出

路由跳转和传参详解

2、隐式传参(params)

针对于页面挑战的时候,不需要展示给客户看到的数据的传递
this.$router.push({name:'MyProject',params:{species:this.species}})
路由跳转和传参详解
接收方 console.log(this.$route)
路由跳转和传参详解

相关文章: