Vue基础知识-（十）Vue实现面包屑导航

本文最后更新于：February 9, 2022 pm

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

需要用到元数据（meta），然后自定义设置属性。

配置路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
    {
      path: '/',
      name: '导航一',
      component: ()=>import('@/views/index'),
      meta: {
        show:true, //是否显示在导航
        requireAuth:true, //是否需要登录
        title: '首页',
        src: '/'
        },
      redirect: '/PageOne',
      children: [
        {
          path: '/PageOne',
          name: '导航1-1',
          component: ()=>import('@/views/nav_1/Page1'),
          meta: {
            title: '子组件一',
            src: '/PageOne'
          }
        },
        {
          path: '/PageTwo',
          name: '导航1-2',
          component: ()=>import('@/views/nav_1/Page2'),
          meta: {
            title: '子组件二',
            src: '/PageTwo'
          }
        }
      ]
    }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

使用

这里是以 ElementUI 为例。

1
2
3
4
5
6
7
8
9
10
11
<el-breadcrumb separator="/" style="margin-top: -37px;margin-left: 30px">
    <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
    <!-- <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>-->
    <el-breadcrumb-item v-for="item in breadList" 
                        v-bind:key="item.path" 
                        :to="{path: item.meta.src}">
        {{ item.meta.title }}
    </el-breadcrumb-item>
</el-breadcrumb>


其中，breadList是从计算属性中获取数据。所以，还需要添加计算属性：

1
2
3
4
5
computed: {
  breadList(){
    return this.$route.matched;
  }
}

获取的数据都是从元数据(meta)中获取的。

其他

查看当前路由

1
2
3
mounted() {
    console.log(this.$route)
}