leftso 27953 0 2021-04-06
版权申明:本文为博主原创文章,未经博主允许不得转载。 http://www.leftso.com/blog/814.html
       

一、vue-router路由跳转分为两大类

  1. 编程式的跳转:router.push
  2. 声明式的跳转:<router-link>

二、编程式的跳转分为三种

1、this.$router.push("detail"):detail为要跳转的路由地址,该方式简单但无法传递参数。

2、this.$router.push({name:"detail",params:{personId:33}}):detail为要跳转的路由地址,params为传递的参数,目标页面可以使用this.$route.params.personId来获取传递的参数,该方式有一个缺点就是在目标页面刷新时传递过来的参数会丢失。

3、this.$router.push({path:"/detail",query:{personId:33}}):detail为要跳转的路由地址,query为传递的参数,目标页面使用this.$route.query.personId来获取传递的参数,该方式会把传递的参数放在url上,如:localhost:8080/#/detail/?personId=33。(该方式也称为地址栏传参)

注意!!!
获取参数是 this.$route.query.** 或者this.$route.params.****
使用this.$router.query.**/params.***是无法获取到参数的

三、声明式的跳转分为三种(优缺点与编程式相同)

  1. <router-link to="detail">跳转到详情页</router-link>
  2. <router-link :to="{name:'detail',params:{personId:33}}">跳转到详情页</router-link>
  3. <router-link :to="{path:'/detail',query:{personId:33}}">跳转到详情页</router-link>
提示:本文最后更新于【 2021-04-06 16:26:03 】,某些文章具有时效性,若有错误或已失效,请在下方留言

评论区域