element 面包屑返回上一个带参页面

在vue-cli 中 通过组件内的路由导航钩子实现

注意 钩子层级应于mounted同级

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      prePath: ""
    };
  },
  computed: {
    
    },
  watch: {
    
    },
  beforeRouteEnter(to, from, next) {
    
    
    /* must call `next` */
    console.log(from, "来了");
    next(data => {
    
    
      data.prePath = from.fullPath;
      console.log(data.prePath, "地址");
    });
  },
  mounted() {
    
    },
  methods: {
    
    }
};
</script>

在这里插入图片描述

面包屑 使用

<template>
  <div>
    <div class="nav">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/scenic/manage' }">景区管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: prePath }">峨眉山</el-breadcrumb-item>
        <el-breadcrumb-item>成人票</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/IT_iosers/article/details/120719358
今日推荐