vue之vue-router传值

山行AI

发布于 2019-10-10 11:47:52

1.3K0

发布于 2019-10-10 11:47:52

vue-router在跳转时传递和接收参数方法。跳转方法

this.$router.push() 描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
this.$router.replace() 描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
this.$router.go(n) 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

1. router.go(1)相当于history.forward();
2. router.go(-1)相当于histroy.back();

打开新页面并传递参数:
let routeData = this.$router.resolve({ name: 'accountApply', query: {  customerId: '123'} });
    window.open(routeData.href, '_blank');

push详解

this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
      })

this.$route.query.id

使用这种方式，传递参数会拼接在路由后面，出现在地址栏

this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })

this.$route.params.id

使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数

<router-link to="personManager/123/名称">执行跳转</router-link>

this.$route.params.id的值是123
this.$route.params.name的值是名称

也可以在js中接收参数:

data() {
      return {
        activeName: 'apply',
        userId: this.$route.params.id
      };
    },

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-10-09，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自开发架构二三事微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度