Vue页面跳转传值和取值

1.第一种方式：组件方式

页面A:传值

<template>
  <div>
    <router-link :to="{name: 'B', params: {id:'1'}}">页面跳转</router-link>
  </div>
</template>

注：name为要跳转的页面名称，在router/index.js中定义，params为要传递的参数。 

页面B:取值

<template>
  <div>
    <p>{{id}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id
    };
  }
};
</script>

<style scoped>
</style>

 第二种方式：逻辑方式

页面A:传值

<template>
  <div>
    <p @click="go()">页面跳转</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    go: function() {
      this.$router.push({
        path: "/b",
        name: "B",
        params: {
          id: "1"
        }
      });
    }
  }
};
</script>

<style scoped>
</style>

注：name所对应的的页面名称不能省略，不然传值无法成功。

页面B:取值

<template>
  <div>
    <p>{{id}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id
    };
  }
};
</script>

<style scoped>
</style>