vue3 面包屑路由页签写法

最新推荐文章于 2024-04-08 09:35:31 发布

前端小云儿

最新推荐文章于 2024-04-08 09:35:31 发布

阅读量214

点赞数 5

分类专栏： vue3知识点文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136338120

版权

vue3知识点专栏收录该内容

72 篇文章 2 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在Vue3项目中结合router.js实现面包屑导航功能，并在main.js中进行配置和应用，同时探讨了与ElementUI组件库的整合使用。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <h3>使用路由对象</h3>
    <h3>v-show="item.meta.title" 过滤最开始的/</h3>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        :to="item.path"
        v-for="(item, index) in $route.matched"
        :key="index"
        v-show="item.meta.title"
        >{
  { item.meta.title }}</el-breadcrumb-item
      >
    </el-breadcrumb>
    <el-button @click="click">获取路由</el-button>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
//获取路由对象
let $route = useRoute()
const click = () => {
  console.log($route.m

了解本专栏