vue3 制作面包屑导航

在vue3中，面包屑导航的制作方法

//准备好路由信息
const routes:Array<RouteRecordRaw> = [{path:'/',name:'index',meta:{title:'首页'},component:()=>import('../pages/index.vue'),children:[{path:'nav',name:'nav',component:()=>import('../components/nav.vue'),meta:{title:'nav'},children:[{path:'test',name:'test',component:()=>import('../components/test.vue'),meta:{title:'test'}},{path:'test2',name:'test2',component:()=>import('../components/test2.vue'),meta:{title:'test2'}}]}]}
]

在首页引用：

//template
<el-breadcrumb><el-breadcrumb-itemv-for="item in list" :key="item.path"><router-link :to="{ path: item.path }">>{{ item.meta.title }}></router-link></el-breadcrumb-item></el-breadcrumb>
//js
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const router = useRoute()
let list = computed(() => {return router.matched
})

记录一下。

vue3 制作面包屑导航相关推荐

wordpress面包屑导航制作教程
面包屑导航无论是在网站栏目列表页.文章内容页.还是单页面都是不可缺少的一部分,wordpress面包屑导航对于用户来说可以清晰的知道所在网站的位置,并且极有可能查看该导航下面的所有内容, 对于提升用户 ...
vue3.2 动态面包屑导航
1.创建面包屑导航组件 breadcrumb.vue,elementplus中有 2.js操作,获取当前路由的完整路径 //引用路由 import {useRoute} from 'vue-route ...
浅析面包屑导航对网站SEO优化有哪些作用？
众所周知,每个优化人员都知道面包屑导航对于网站来说是不可或缺的一部分,面包屑导航就是像面包一样一层一层的导航结构.能够更好的帮助用户在栏目页可以返回网站首页或者点击进入下一层内容页面,提升用户体验好感 ...
php递归面包屑,php可应用于面包屑导航的递归寻找家谱树实现方法
本文实例讲述了php可应用于面包屑导航的递归寻找家谱树实现方法.分享给大家供大家参考.具体实现方法如下:<?phpecho " ";$area = array(array(& ...
权限组件（4）：给动态菜单增加面包屑导航
效果图: 一.在初始化权限的时候增加二级菜单的标题和url 这么做是为了在中间件中把二级菜单和具体权限的标题.url都储存起来 rbac/service/init_permission.py from ...
一行代码搞定WordPress面包屑导航breadcrumb
有好几位网友在问WordPress面包屑导航breadcrumb怎么操作,网上有些教程是去function文件中定义,其实不用那么复杂,很简单一行代码就能搞定.下面随ytkah一起来看看.如果是单页, ...
react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
Laravel Breadcrumbs 自动面包屑导航
说明 laravel-breadcrumbs 可为你的 Laravel 项目快速定制拥有 Bootstrap 风格的面包屑导航. 本文章由 The EST Group 成员 @Kelvin 撰写, 首 ...
夺命雷公狗---DEDECMS----26dedecms面包屑导航的实现
我们在很多项目里面都会用到面包屑导航,而dedecms里面也是给我们封装好面包屑导航的了,如下图所示: 在dede里面实现面包屑导航主要用到{dede:field.position/}标签,我们首先来 ...

vue3 制作面包屑导航

vue3 制作面包屑导航相关推荐

最新文章

热门文章