vue 动态面包屑通过面包屑带参数跨级跳转面包屑动态标题多级路由嵌套设置默认页面和隐藏左侧导航栏显示

面包屑

实现效果

可以通过面包屑进行跨级跳转

以下为我的面包屑组件,breadcrumb.vue

<template><div class="navbar clearfix"><el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right"><el-breadcrumb-item > <span @click="back">返回</span> </el-breadcrumb-item><el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="item.path">{{item.meta.title}}</el-breadcrumb-item></el-breadcrumb></div>
</template><script>export default {name: 'Navbar',data() {return {levelList: []}},watch: {$route() {this.getBreadcrumb()}},created() {this.getBreadcrumb()},methods: {back() {this.$router.go(-1); //返回上一层},getBreadcrumb() {//$route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录let matched = this.$route.matched.filter(item => item.name)const first = matched[0];this.levelList = matched}}}
</script>

应用面包屑

在最外层的主页Home.vue中的js部分,其他可以自己补上

然后在主体上加上<router-view></router-view>标签存放内容

<script>import Breadcrumb from './navbar.vue'export default {components: {Breadcrumb}
}
</script>

动态面包屑

实现动态面包屑本人的方法不一定是最好的,但是比较方便.

var title = "想设置的标题";
this.$route.matched[this.$route.matched.length - 1].meta.title = title; //设置路由名称let path = this.$route.matched[this.$route.matched.length - 1].path;if (path.indexOf("?") > 0) {this.$route.matched[this.$route.matched.length - 1].path = path.split("?")[0] + "?id=" +id;} else {this.$route.matched[this.$route.matched.length - 1].path = path + "?id=" + id; //设置路由路径}

把这段代码添加在需要实现的页面就自动会在跳转的时候将面包屑的名称更改

路由

多级路由嵌套设置默认页面只需要把默认的子路由的path项设定为空

以下为路由的索引页./route/index.js的实例

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router);export default new Router({routes: [{path: '/',name: 'Login',component: resolve => require(['@/components/Login'], resolve),hidden: true //表示在左侧导航栏隐藏},{path: '/home.html',name: '一级',component: resolve => require(['@/components/Home'], resolve),iconCls: "el-icon-menu",meta: {title: '一级',keepAlive: false, // 不需要缓存requireAuth: true //表示进入这个路由是需要登录的},children: [{path: '/feedback.html',component: resolve => require(['@/components/user/feedback'], resolve),name: '二级',meta: {title: '二级',keepAlive: false, // 不需要缓存requireAuth: true // 添加该字段，表示进入这个路由是需要登录的},children: [{path: '',//这里设置为空component: resolve => require(['@/components/user/userChildren'], resolve),name: '三级',meta: {title: '三级',keepAlive: false, // 不需要缓存requireAuth: true // 添加该字段，表示进入这个路由是需要登录的}}]}]}]
})

多路由嵌套

需要注意的是,每个子路由都需要对应一个 <router-view></router-view>标签来存放

我新建了一个main.vue来存放多路由嵌套多个界面

<template><keep-alive><router-view :key="Math.random()"></router-view></keep-alive>
</template>
<script>
</script>
<style>
</style>

/route/index.js里面设置的title就是面包屑显示的名字

vue 动态面包屑通过面包屑带参数跨级跳转面包屑动态标题多级路由嵌套设置默认页面和隐藏左侧导航栏显示相关推荐

Vue 人资实战篇八权限设计重点！！！路由访问权限，左侧导航栏显示等等，还有 mixin 混入方法
1.0 权限设计-RBAC的权限设计思想传统的权限设计是对每个人进行单独的权限设置,但这种方式已经不适合目前企业的高效管控权限的发展需求,因为每个人都要单独去设置权限基于此,RBAC的权限模型就应 ...
vue+elementui左侧导航栏
vue+elementui左侧导航栏踩坑最近接触前端vue+elementui,记录一下 1. element官网这里:default-active="***"前面没有冒号,直接 ...
Vue页面手动刷新，导航栏激活项还原到初始状态问题解决方案
场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容.问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterp ...
页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递
同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容. 在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息, ...
pb 执行存储过程带参数_PB级海量数据服务平台架构设计实践
基于PB级海量数据实现数据服务平台,需要从各个不同的角度去权衡,主要包括实践背景.技术选型.架构设计,我们基于这三个方面进行了架构实践,下面分别从这三个方面进行详细分析讨论: 实践背景该数据服务平台 ...
vue路由嵌套无法渲染页面空白
在学习vue的时候,根据官方教程卸了嵌套路由,结果页面空白 router/index.js import Vue from 'vue' import Router from 'vue-router' ...
vue项目中处理左侧导航栏问题的分享
2019独角兽企业重金招聘Python工程师标准>>> 相信左侧导航栏大家都不陌生,几乎每个项目都会存在.以前用jquery做的时候,某些本不是什么问题的地方就突然变成阻碍了.下面就 ...
手写口风琴全动态左侧导航栏
效果图用到知识简单js,css3 - 设计思路 1.div居中 2.ul li 3.显示隐藏 4.三角设计 5.伪元素前后加三角第一步 <li cla ...
html新闻左侧导航栏动态,网站导航栏如何实现动态效果
导航栏是每一个网站都要有的,那么对于一般的导航栏制作,相信大家都会,而且也不会遇到什么麻烦,但是如何才能让网站导航栏实现动态效果估计这会难倒很多技术人员,那么下面就来为大家分析解答一下.Html代码: ...
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
掌握分寸感,找目标一致的人协同你,有效地调配资源,就可以提高效率. 写在前面的话:博主最近想要搭建自己的前端若依项目,因此此系列博客会做一些记录.我的项目gitee地址: https://gitee. ...

vue 动态面包屑通过面包屑带参数跨级跳转面包屑动态标题多级路由嵌套设置默认页面和隐藏左侧导航栏显示

面包屑

应用面包屑

动态面包屑

路由

多路由嵌套

vue 动态面包屑通过面包屑带参数跨级跳转面包屑动态标题多级路由嵌套设置默认页面和隐藏左侧导航栏显示相关推荐

最新文章

热门文章

vue 动态面包屑 通过面包屑带参数跨级跳转 面包屑动态标题 多级路由嵌套设置默认页面和隐藏左侧导航栏显示

面包屑

应用面包屑

动态面包屑

路由

多路由嵌套

vue 动态面包屑 通过面包屑带参数跨级跳转 面包屑动态标题 多级路由嵌套设置默认页面和隐藏左侧导航栏显示相关推荐

最新文章

热门文章

vue 动态面包屑通过面包屑带参数跨级跳转面包屑动态标题多级路由嵌套设置默认页面和隐藏左侧导航栏显示

vue 动态面包屑通过面包屑带参数跨级跳转面包屑动态标题多级路由嵌套设置默认页面和隐藏左侧导航栏显示相关推荐