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

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐