一:路由跳转
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)