Vue基础知识-（十一）Vue实现导航栏动态显示

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

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

目录

根据配置的路由和规定是否显示该路由，来动态生成导航栏。

路由配置

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
      path: '/login',
      name: '登录',
      meta: {
        show:false, //是否显示在导航
        requireAuth:false, //是否需要登录
        title: '登录'
        },
      component: ()=>import('@/views/login/index')
    },
    {
      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'
          }
        }
      ]
    },
    {
      path: '/two',
      name: '导航二',
      component: ()=>import('@/views/index'),
      meta: {
        show:true, //是否显示在导航
        requireAuth:true //是否需要登录
        },
      children: [
        {
          path: '/PageThree',
          name: '导航2-1',
          component: ()=>import('@/views/nav_2/Page1')
        },
        {
          path: '/PageFor',
          name: '导航2-2',
          component: ()=>import('@/views/nav_2/Page2'),
          meta: {
            show:true, //是否显示在导航
            requireAuth:true //是否需要登录
          },
        }
      ]
    }
]

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

// router.beforeEach((to,from,next)=>{
//   if(to.meta.requireAuth){ //需要登录
//     let token = localStorage.getItem('token')
// 	console.log(token)
//       if(token!=null){ //登录过
//         if(token=='qwerqwerwer'){
//           next()
//         }else{
//           next({path:'/err'})
//         }
//       }else{ //没有登录
//         next({path:'/login'})
//       }
//   }else{ //不需要登录
//     next()
//   }
// })

export default router

使用

展示路由时，使用循环来遍历哪些路由需要展示。

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
<template>
  <el-submenu v-for="(item,index) in $router.options.routes" 
              :index="index+''" 
              v-if="item.meta.show">
      <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">{{item.name}}</span>
      </template>
      <el-menu-item v-for="(itemson,indexson) in item.children" 
                    :index="itemson.path" 
                    :class="$route.path==itemson.path?'is-active':''" >
          {{itemson.name}}
      </el-menu-item>
  </el-submenu>
</template>

<style>
</style>

<script>
export default {
  name: 'index',
  data() {
    return {
    }
  }
}
</script>

其中，:index 的值是一个字符串，所以后面加上了一个空串。