vue-动态生成面包屑

最新推荐文章于 2024-08-31 14:31:49 发布

@小码云

最新推荐文章于 2024-08-31 14:31:49 发布

阅读量777

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45608302/article/details/120213666

版权

Vue.js 路由配置面包屑导航动态生成组件导入

关键词由CSDN通过智能技术生成

配置路由

分三级

 {
    path: '/macthed',
    name: 'macthed',
    component: () => import( '../views/macthed'),
    meta:{title:"资源管理"},
    children:[
      {
        path: 'maca',
        name: 'maca',
        component: () => import( '../views/mac-son/maca'),
        meta:{title:"计算资源"},
        href:"/maca",
        children:[
            {
            path: 'macb',
            name: 'macb',
            component: () => import( '../views/mac-son/macb'),
            meta:{title:"弹性云服务器"},
            href:"/macb",
          },
          {
            path: 'macc',
            name: 'macc',
            component: () => import( '../views/mac-son/macc'),
            meta:{title:"GPU服务器"},
            href:"/macc",
          },
        ]
      },
    ]
  },

页面

<template>
  <div>
      <!-- 先找到element中的面包屑 -->
      <el-breadcrumb separator="/">
      //将监听的面包屑遍历出来并且动态生成
            <el-breadcrumb-item :to="v.href" v-for="v in brea" :key="v.path">
                <!-- 动态生成面包屑 -->
                {{v.meta.title}}

            </el-breadcrumb-item>
      </el-breadcrumb>
      <h2>这是h2</h2>
        <router-link to="/macthed/maca">计算资源</router-link><br/>
        <router-link to="/macthed/maca/macb">弹性</router-link><br/>
        <router-link to="/macthed/maca/macc">GPU</router-link><br/>
       <router-view>

       </router-view>

   
  </div>
</template>

<script>
export default {
    computed:{
        brea(){
            // 监听路由中的面包屑
            return this.$route.matched;
        }
    },
    mounted (){
        console.log(this.$route);
        //查看路由信息
    }
}
</script>

<style scoped>
</style>