vue 路由跳转和传参详解

一：路由跳转

1、router-link跳转

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

2、js的push方法

1)this.$router.push('/personCenter')
2)this.$router.push({name:'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)

注意：隐式传参用params时，只能用name作为路由的位移标识，不能用path,但是显示传参两种方式都时🆗的