Vue 页面参数回调

106 阅读1分钟

A页面->B页面选择->带参数返回A页面

A页面跳转B页面:

this.$router.push({ path: "/temp/B" });

B页面返回A页面带参数:

this.$route.params.data = data;
this.$router.back();

A页面接收参数

<script>
let previousRouterName = "";
let selectData = "";
</script>
export default {
  name: "XXXXXX",
  data() {
    return {
      data: {
        name: ""
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    previousRouterName = from.name;
    if (from.name === "B") {
      selectData = from.params.data;
    }
    next((vm) => {

vm.judgeAccess(selectData);

});
  },
  created() {
    if (previousRouterName === "B") {
      console.log("params:" + selectData);
      if (selectData) {
        this.data = selectData;
      }
    }
  },
  mounted() {},
  methods: {
    judgeAccess(selectData) {
      this.data = selectData;
    },
 }

可能碰到的问题: 1、A页面输入框输入内容跳转到B页面,返回后输入内容消失。 路由页面添加

{
      path: "/temp/A",
      name: "A",
      component: A,
      meta: {
        isentrance: true,
        title: "XXXX",
        keepAlive: true, // 需要被缓存
      },
    },