vue this.$router.push路由跳转传值

153 阅读1分钟
<template>
  <div>
    <div @click="toLb">跳转去Lb页面</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name:'hello,你好吗'
    };
  },
  methods: {
    toLb() {

对象跳转,在Lb组件中获取参数, mounted(){ this.name=this.$route.query.paramB }

      this.$router.push({
        path: "/Lb",
        query: {
          paramB: this.name
        },

注意:通过路由的params对象传递过来的参数paramB始终是undefined,那是因为路由的params对象使用,必须要通过路由名来调用路由,而不同通过path来调用,而query对象则没有这个要求。

        params: {
          paramA: "a"
        }
      });

字符串跳转

      this.$router.push('/Lb')

命名的路由跳转

      this.$router.push({name:'Lb'})
    }
  }
};
</script>

这是Lb组件,接收上个页面传过来的值

  export default {
  data() {
    return {
      name:''
    };
  },
  components: {
    Header
  },
  mounted(){
    this.name=this.$route.query.paramB
  }
};