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

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

一个假的前端男

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

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript html

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/120719358

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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