Question

我目前正在使用Vue.js框架，我需要为应用程序设置面包屑。我正在使用商店组件，现在我可以获得当前值和后退状态，但我需要获得面包屑中页面之间的路径。所以我虽然使用stack []来存储索引。

我被困在这里，任何人都可以帮助我吗？

＆＃13;

const _state = {
  current: '',
  back: false,
  stack: [],
};


const getters = {
  breadcrumb: s => s,
};

const actions = {
  SET_BACK({ commit }, value) {
    commit('SET_BACK', value);
  },
  SET_CURRENT({ commit }, value) {
    commit('SET_CURRENT', value);
  },
  SET_STACK ()
};

const mutations = {
  SET_CURRENT(state, value) {
    state.current = value;
  },
  SET_BACK(state, value) {
    state.back = value;
  },
};

export default {
  state: _state,
  getters,
  actions,
  mutations,
};

＆＃13;

我需要修复堆栈方法

基本思想是在面包屑中获取页面路径，例如：

主页＆gt;第1页＆GT; SECTION1＆GT;

Answer 1

如果您是以自定义方式进行操作，则必须处理许多问题，例如知道何时清理堆栈，每个组件的真实URL（复制Route工作）等等...例如，您如何告诉path函数的每个组件的stack？

如果您正在使用Vue Router，您可以使用路由器文件中的附加信息来设置每个部分的Breadcrumb，例如：

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        breadcrumb: [
          { name: 'Hello World' }
        ]
      }
    },
    {
      path: '/area1',
      name: 'Area1',
      component: Area1,
      meta: {
        breadcrumb: [
          { name: 'Area 1' }
        ]
      }
    },
    {
      path: '/area12',
      name: 'Area12',
      component: Area12,
      meta: {
        breadcrumb: [
          { name: 'Area 1', link: 'area11' },
          { name: 'Area 2' }
        ]
      }
}
...

这里有一个tutorial和代码来源：https://github.com/iFgR/vue-breadcrumbs。

我建议使用路由器或面包屑组件，例如https://github.com/samturrell/vue-breadcrumbs或https://github.com/Scrum/vue-2-breadcrumbs。

最后，我刚刚在40行代码中找到了这个＆＃34;非常简单的Vue面包屑＆＃34; here;也许它会更好地适应你。

希望它有所帮助！

Answer 2

＆＃13;

<template>
  <div class="breadcrumb">
    <ul class="menu">
      <li v-if="back" class="back">
        <font-awesome-icon class="back-icon" @click="goBack" :icon="backIcon" />Back
      </li>

        <li class="current">
        <font-awesome-icon class="forward-icon" :icon="forwardIcon" />{{current}}
      </li>
    </ul>
  </div>
</template>

＆＃13;

Answer 3

我很高兴使用vue-2-crumbs插件，但随后发现它不适用于SSR，因此创建了我自己的组件。

Crumbs.vue

<template>
    <ul v-if="stack.length > 0" class="crumbs">
        <li v-for="item in stack" class="crumbs__item" :class="item.class">
            <router-link :to="{ name: item.name }" class="crumbs__link">
                {{ item.label }}
            </router-link>
        </li>
    </ul>
</template>

<script>
    export default {
        name:    'Crumbs',
        data() {
            return { stack: [] }
        },
        mounted() {
            this.buildStack()
        },
        methods: {
            buildStack() {
                this.stack = []
                this.addPage(this.$router.currentRoute)
                this.stack = this.stack.reverse()
            },
            addPage(route, first) {
                this.stack.push({
                    name:  route.name,
                    label: route.meta?.breadcrumb?.label || route.name.replace('.', ' '),
                    class: 'crumbs__item--' + (typeof first === 'undefined' ? 'current' : 'parent')
                })
                if (route.meta.breadcrumb.parent) {
                    const parent = this.getRoute(route.meta.breadcrumb.parent)
                    this.addPage(parent, true)
                }
            },
            getRoute(name) {
                return this.$router.options.routes.find(route => route.name === name)
            }
        }
    }
</script>

还有一点CSS：

.crumbs {
    display:         flex;
    flex-direction:  row;
    list-style-type: none;
    margin:          1rem 0 2rem 0;
    padding:         0;
    flex-wrap:       wrap;
}

.crumbs__link {
    text-decoration: underline;
    text-transform: capitalize;
}

.crumbs__item--parent::after {
    content: '>';
}

我的路由设置与vue-2-crumbs插件所需的设置相同。

我很惊讶我的组件是42行，而vue-2-crumbs插件是2317行。也许那里有一些额外的功能，但是即使如此！

对于我来说，它的执行方式完全相同。

在vue应用程序

3 个答案: