用好Vue的面包屑导航+链接可跳转组件，一次打造用户友好体验

2023-11-16 11:06:37

面包屑导航的作用

面包屑导航是一种网站导航系统，它通过在网页顶部显示当前位置的路径，帮助用户了解自己在网站中的位置，并方便他们返回到上一级或更高级别的页面。面包屑导航通常由一系列链接组成，每个链接代表一个页面或类别，最后一个链接代表当前页面。

手动配置路由和菜单

在Vue.js中，我们需要手动配置路由和菜单，才能实现面包屑导航。首先，我们需要在router.js文件中定义路由规则，如下所示：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
];

const router = new VueRouter({
  routes
});

接下来，我们需要在App.vue文件中定义菜单，如下所示：

<template>
  <div id="app">
    <nav class="navbar">
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li><router-link to="/contact">Contact</router-link></li>
      </ul>
    </nav>

    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  router
};
</script>

使用breadID和bread数组装载需要展现的路由

最后，我们需要使用breadID和bread数组来装载需要展现的路由，以便在路由变化时自动更新面包屑导航。首先，我们需要在App.vue文件中定义一个名为bread的数据属性，如下所示：

export default {
  name: 'App',
  router,
  data() {
    return {
      bread: []
    };
  }
};

接下来，我们需要在router.js文件中添加一个名为beforeEach的钩子函数，如下所示：

const router = new VueRouter({
  routes,
  beforeEach: (to, from, next) => {
    // 获取当前路由在菜单中的位置
    const breadID = to.matched.findIndex(record => record.meta.breadID);

    // 根据breadID装载需要展现的路由
    const bread = [];
    for (let i = breadID; i >= 0; i--) {
      bread.unshift(to.matched[i]);
    }

    // 更新bread数据属性
    App.bread = bread;

    next();
  }
});