Vue 项目中如何安装 VueRouter 并实现动态面包屑导航

Vue项目中，有了动态面包屑导航就会更方便！这样用户可以更清楚地了解和操作整个网站。这里我来教大家怎么在Vue项目里装上VueRouter，做个面包屑组件，还有在route里面设置标签，让你的面包屑导航更实用。看完我的教程，相信你也能轻松搞定这个功能，提高你的项目水平！

一、为何选择VueRouter

用Vue做项目，选对工具和库很重要。VueRouter作为Vue.js原装的路由管理器，和核心完美融合，能搞定复杂的单页应用routes。我挑VueRouter的原因，就是功能强大，像路由参数啊、查询呀、通配符啥的，让我的开发轻松许多，管理页面跳转也简单明了。

npm install vue-router --save

二、安装VueRouter的步骤

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  // 定义路由路径和组件的对应关系
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/blog', component: Blog },
  { path: '/blog/:id', component: BlogDetail }
]
const router = new VueRouter({
  mode: 'history',
  routes
})
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

装vuerouter可是我开工前的一大关键环节！通常我都会在项目的根目录下开个终端，然后输入“npminstallvue-router”。这操作虽然看似简单，但对我而言就是正式干活的信号了！等它安装好了，就可以把VueRouter导入到项目里的主程序main.js，接着配置一些基础项，比如设定路由表啦、搭建路由实例啥的。

三、配置VueRouter的细节

在设置VueRouter的时候，我特别注重小细节。比如，我会精心设计每个路由的路径和对应的组件，保证他们跟整个项目的要求对上号。而且，我还给路由配置里加了个meta字段，这个就像给面包片做标记一样，方便我以后查找和使用。这样一来，我的路由系统既灵活好用，也容易维护。

四、创建面包屑组件的乐趣

  

    
      {{ crumb.label }}
      >
    
  


export default {
  computed: {
    // 动态计算面包屑导航内容
    breadcrumbs() {
      const breadcrumbs = []
      const matched = this.$route.matched
      matched.forEach(route => {
        // 排除根路由
        if (route.path !== '/') {
          breadcrumbs.push({
            label: route.meta && route.meta.breadcrumbLabel ? route.meta.breadcrumbLabel : route.path,
            route: route.path
          })
        }
      })
      return breadcrumbs
    }
  }
}


.breadcrumbs {
  margin-bottom: 10px;
}
.breadcrumbs span {
  white-space: nowrap;
}
.breadcrumbs-separator {
  margin-left: 5px;
  margin-right: 5px;
  color: #ccc;
}

搭建面包屑组件，真是既好玩又有挑战！每次我都喜欢在项目里那个叫“components”的地方，新建个全新的Vue组件，就好像我们在构建一个全新的世界似的。然后，就在那个叫做“Breadcrumbs”的Vue组件文档里面，我就会敲击键盘，弄出点代码出来，画画模版、写写小程序，再搞搞样式什么的。每次搞定一个组件，看着它在项目里跑得欢快，心里总是美滋滋的，特有成就感！

五、在路由中定义面包屑导航的label

想实现动态面包屑导航？很简单！就是在路由定义里加个breadcrumbLabel字段，这个字段用来给每个页面设定导航名字，这样就能根据现在的路由情况来更新导航。我超喜欢这种设计，用起来顺手，也让代码更清晰好懂。

六、在页面中引入Breadcrumbs组件

const routes = [
  { path: '/', component: Home, meta: { breadcrumbLabel: '首页' } },
  { path: '/about', component: About, meta: { breadcrumbLabel: '关于我们' } },
  { path: '/blog', component: Blog, meta: { breadcrumbLabel: '博客' } },
  { path: '/blog/:id', component: BlogDetail, meta: { breadcrumbLabel: '博客详情' } }
]

当想在网页里加个面包屑导航时，得先引入那个叫Breadcrumbs的小工具。像这样，我会在App.vue文件里添点代码把它装进去。这样搞让我明白了，编写代码要着重考虑组件的可重复使用性和灵活性。这样就能保证无论在哪儿，我的面包屑导航都能稳稳工作！

七、实现动态面包屑导航的满足感

搞定所有配置和开发任务之后，做出来一个动态面包屑导航，感觉真爽！每个页面一跳转，它就自动换行，摆出当前页面在哪儿、怎么走。这样一来，用户能轻松逛网站；而且，看着自己的成果，也自信满满，自豪得不行！

总的来说，这次学习让我搞懂了怎么在Vue项⼯里实现动态面包屑导⽰，感觉挺有趣的～希望我的分享对你们有所帮助喔！记得动手试试看哦～最后，有句话想问问大家：做面包屑导航时，你们遇到过什么难题吗？来评论区说说，记得给文章点个赞再分享出去

  

    
    
  


import Breadcrumbs from './components/Breadcrumbs.vue'
export default {
  components: {
    Breadcrumbs
  }
}