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

最新推荐文章于 2024-04-02 13:39:33 发布

原创最新推荐文章于 2024-04-02 13:39:33 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

本文详细介绍了如何在Vue CLI项目中利用beforeRouteEnter钩子处理路由进入前的状态，并结合面包屑组件展示当前路径。通过实例展示了如何设置预设路径，确保用户体验的连续性。

在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>