首页 >> js开发 >> jsvue 使用localstorage实现面包屑的操作js大全
jsvue 使用localstorage实现面包屑的操作js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
mutation.js代码：
changeRoute(state, val) {
let routeList = state.routeList;
let isFind = false;
let findeIdex = 0;
//菜单栏和下拉的二级菜单
if (val['type'] == 'header' || val['type'] == 'secondHeader')
{
routeList.length = 0;
//顶级菜单清除缓存
localStorage.removeItem("routeList");
}
let routes = routeList;
let localStorageList = localStorage.getItem('routeList');
if (localStorageList) {
//当前页刷新,使用缓存数据
routes = JSON.parse(localStorageList as any);
}
//遍历是否有存入当前路由位置
for (let i = 0; i < routes.length; i++) {
isFind = routes[i]['name'] == val['name'];
if (isFind) {
findeIdex = i;
break;
}
};
if (isFind) {
//有的话，清除当前路由以后的数据
routes.splice(findeIdex + 1, routes.length - findeIdex - 1);
//修改缓存
localStorage.setItem('routeList', JSON.stringify(routes));
} else {
//存入全局变量
routes.push(val);
//设置缓存
localStorage.setItem('routeList', JSON.stringify(routes));
}
}
changeRoute(state, val) {
let routeList = state.routeList;
let isFind = false;
let findeIdex = 0;
//菜单栏和下拉的二级菜单
if (val['type'] == 'header' || val['type'] == 'secondHeader')
{
routeList.length = 0;
//顶级菜单清除缓存
localStorage.removeItem("routeList");
}
let routes = routeList;
let localStorageList = localStorage.getItem('routeList');
if (localStorageList) {
//当前页刷新,使用缓存数据
routes = JSON.parse(localStorageList as any);
}
//遍历是否有存入当前路由位置
for (let i = 0; i < routes.length; i++) {
isFind = routes[i]['name'] == val['name'];
if (isFind) {
findeIdex = i;
break;
}
};
if (isFind) {
//有的话，清除当前路由以后的数据
routes.splice(findeIdex + 1, routes.length - findeIdex - 1);
//修改缓存
localStorage.setItem('routeList', JSON.stringify(routes));
} else {
//存入全局变量
routes.push(val);
//设置缓存
localStorage.setItem('routeList', JSON.stringify(routes));
}
}页面使用：
//获取面包屑缓存
let localStorageList1 = localStorage.getItem('routeList');
//ts写法 as any
this.routeList = JSON.parse(localStorageList1 as any)
? JSON.parse(localStorageList1 as any)
: { name: 'test', url: '/test' };
//获取面包屑缓存
let localStorageList1 = localStorage.getItem('routeList');
//ts写法 as any
this.routeList = JSON.parse(localStorageList1 as any)
? JSON.parse(localStorageList1 as any)
: { name: 'test', url: '/test' };知识点：知识点：1、localstorage2、JSON.stringify()的作用是将 JavaScript 值转换为 JSON 字符串，JSON.parse()将JSON字符串转为一个对象补充知识：vue+elementUI动态生成面包屑导航补充知识：补充知识：vue+elementUI动态生成面包屑导航项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示
export default {
data () {
return {
activeMenu: '',
indexBreadcrumbs: [],
menus: [{
id: '1',
name: '门户管理',
icon: 'menhuguanli',
path: '#2',
child: [{
id: '1-1',
name: '轮播图',
path: '/backstage/protaManage/turns'
}, {
id: '1-2',
name: '基础数据',
path: '/backstage/protaManage/basis'
}, {
id: '1-3',
name: '分类管理',
path: '/backstage/protaManage/classify'
}, {
id: '1-4',
name: '内容发布',
path: '/backstage/protaManage/content'
}]
}, {
id: '2',
name: '我的云盘',
icon: 'yunpan',
path: '/backstage/yunManage'
}, {
id: '3',
name: '管理菜单',
icon: 'shezhi',
path: '/backstage/menusManage'
}, {
id: '4',
name: '编辑板块',
icon: 'fabuzhongxin',
path: '/backstage/editPlate'
}]
}
},
watch: {
$route () {
this.handChange()
}
},
computed: {
breadcrumbList () {
let breadcrumbs = []
let menuList = this.menus
this.indexBreadcrumbs.map(item => {
for (let i = 0; i < menuList.length; i++) {
if (item === menuList[i].path) {
breadcrumbs.push(menuList[i])
if (menuList[i].child) {
menuList = menuList[i].child
}
break;
}
}
})
return breadcrumbs
}
},
methods: {
handChange () {
this.$emit('hand-change', this.breadcrumbList)
},
handleSelect (index, indexPath) {
this.indexBreadcrumbs = indexPath
}
},
created () {
this.handChange()
}
}
export default {
data () {
return {
activeMenu: '',
indexBreadcrumbs: [],
menus: [{
id: '1',
name: '门户管理',
icon: 'menhuguanli',
path: '#2',
child: [{
id: '1-1',
name: '轮播图',
path: '/backstage/protaManage/turns'
}, {
id: '1-2',
name: '基础数据',
path: '/backstage/protaManage/basis'
}, {
id: '1-3',
name: '分类管理',
path: '/backstage/protaManage/classify'
}, {
id: '1-4',
name: '内容发布',
path: '/backstage/protaManage/content'
}]
}, {
id: '2',
name: '我的云盘',
icon: 'yunpan',
path: '/backstage/yunManage'
}, {
id: '3',
name: '管理菜单',
icon: 'shezhi',
path: '/backstage/menusManage'
}, {
id: '4',
name: '编辑板块',
icon: 'fabuzhongxin',
path: '/backstage/editPlate'
}]
}
},
watch: {
$route () {
this.handChange()
}
},
computed: {
breadcrumbList () {
let breadcrumbs = []
let menuList = this.menus
this.indexBreadcrumbs.map(item => {
for (let i = 0; i < menuList.length; i++) {
if (item === menuList[i].path) {
breadcrumbs.push(menuList[i])
if (menuList[i].child) {
menuList = menuList[i].child
}
break;
}
}
})
return breadcrumbs
}
},
methods: {
handChange () {
this.$emit('hand-change', this.breadcrumbList)
},
handleSelect (index, indexPath) {
this.indexBreadcrumbs = indexPath
}
},
created () {
this.handChange()
}
}上面的代码是模拟的数据,调用elememtUI的组件导航菜单的中的@select方法,有两个参数,可以自行打印然后在computed中计算当前选中的是哪一部分,取到返回值,然后$emit传给父组件,
首页
{{o.name}}
首页
{{o.name}}
changeRoute(state, val) {
let routeList = state.routeList;
let isFind = false;
let findeIdex = 0;
//菜单栏和下拉的二级菜单
if (val['type'] == 'header' || val['type'] == 'secondHeader')
{
routeList.length = 0;
//顶级菜单清除缓存
localStorage.removeItem("routeList");
}
let routes = routeList;
let localStorageList = localStorage.getItem('routeList');
if (localStorageList) {
//当前页刷新,使用缓存数据
routes = JSON.parse(localStorageList as any);
}
//遍历是否有存入当前路由位置
for (let i = 0; i < routes.length; i++) {
isFind = routes[i]['name'] == val['name'];
if (isFind) {
findeIdex = i;
break;
}
};
if (isFind) {
//有的话，清除当前路由以后的数据
routes.splice(findeIdex + 1, routes.length - findeIdex - 1);
//修改缓存
localStorage.setItem('routeList', JSON.stringify(routes));
} else {
//存入全局变量
routes.push(val);
//设置缓存
localStorage.setItem('routeList', JSON.stringify(routes));
}
}
changeRoute(state, val) {
let routeList = state.routeList;
let isFind = false;
let findeIdex = 0;
//菜单栏和下拉的二级菜单
if (val['type'] == 'header' || val['type'] == 'secondHeader')
{
routeList.length = 0;
//顶级菜单清除缓存
localStorage.removeItem("routeList");
}
let routes = routeList;
let localStorageList = localStorage.getItem('routeList');
if (localStorageList) {
//当前页刷新,使用缓存数据
routes = JSON.parse(localStorageList as any);
}
//遍历是否有存入当前路由位置
for (let i = 0; i < routes.length; i++) {
isFind = routes[i]['name'] == val['name'];
if (isFind) {
findeIdex = i;
break;
}
};
if (isFind) {
//有的话，清除当前路由以后的数据
routes.splice(findeIdex + 1, routes.length - findeIdex - 1);
//修改缓存
localStorage.setItem('routeList', JSON.stringify(routes));
} else {
//存入全局变量
routes.push(val);
//设置缓存
localStorage.setItem('routeList', JSON.stringify(routes));
}
}页面使用：
//获取面包屑缓存
let localStorageList1 = localStorage.getItem('routeList');
//ts写法 as any
this.routeList = JSON.parse(localStorageList1 as any)
? JSON.parse(localStorageList1 as any)
: { name: 'test', url: '/test' };
//获取面包屑缓存
let localStorageList1 = localStorage.getItem('routeList');
//ts写法 as any
this.routeList = JSON.parse(localStorageList1 as any)
? JSON.parse(localStorageList1 as any)
: { name: 'test', url: '/test' };知识点：知识点：1、localstorage2、JSON.stringify()的作用是将 JavaScript 值转换为 JSON 字符串，JSON.parse()将JSON字符串转为一个对象补充知识：vue+elementUI动态生成面包屑导航补充知识：补充知识：vue+elementUI动态生成面包屑导航项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示
export default {
data () {
return {
activeMenu: '',
indexBreadcrumbs: [],
menus: [{
id: '1',
name: '门户管理',
icon: 'menhuguanli',
path: '#2',
child: [{
id: '1-1',
name: '轮播图',
path: '/backstage/protaManage/turns'
}, {
id: '1-2',
name: '基础数据',
path: '/backstage/protaManage/basis'
}, {
id: '1-3',
name: '分类管理',
path: '/backstage/protaManage/classify'
}, {
id: '1-4',
name: '内容发布',
path: '/backstage/protaManage/content'
}]
}, {
id: '2',
name: '我的云盘',
icon: 'yunpan',
path: '/backstage/yunManage'
}, {
id: '3',
name: '管理菜单',
icon: 'shezhi',
path: '/backstage/menusManage'
}, {
id: '4',
name: '编辑板块',
icon: 'fabuzhongxin',
path: '/backstage/editPlate'
}]
}
},
watch: {
$route () {
this.handChange()
}
},
computed: {
breadcrumbList () {
let breadcrumbs = []
let menuList = this.menus
this.indexBreadcrumbs.map(item => {
for (let i = 0; i < menuList.length; i++) {
if (item === menuList[i].path) {
breadcrumbs.push(menuList[i])
if (menuList[i].child) {
menuList = menuList[i].child
}
break;
}
}
})
return breadcrumbs
}
},
methods: {
handChange () {
this.$emit('hand-change', this.breadcrumbList)
},
handleSelect (index, indexPath) {
this.indexBreadcrumbs = indexPath
}
},
created () {
this.handChange()
}
}
export default {
data () {
return {
activeMenu: '',
indexBreadcrumbs: [],
menus: [{
id: '1',
name: '门户管理',
icon: 'menhuguanli',
path: '#2',
child: [{
id: '1-1',
name: '轮播图',
path: '/backstage/protaManage/turns'
}, {
id: '1-2',
name: '基础数据',
path: '/backstage/protaManage/basis'
}, {
id: '1-3',
name: '分类管理',
path: '/backstage/protaManage/classify'
}, {
id: '1-4',
name: '内容发布',
path: '/backstage/protaManage/content'
}]
}, {
id: '2',
name: '我的云盘',
icon: 'yunpan',
path: '/backstage/yunManage'
}, {
id: '3',
name: '管理菜单',
icon: 'shezhi',
path: '/backstage/menusManage'
}, {
id: '4',
name: '编辑板块',
icon: 'fabuzhongxin',
path: '/backstage/editPlate'
}]
}
},
watch: {
$route () {
this.handChange()
}
},
computed: {
breadcrumbList () {
let breadcrumbs = []
let menuList = this.menus
this.indexBreadcrumbs.map(item => {
for (let i = 0; i < menuList.length; i++) {
if (item === menuList[i].path) {
breadcrumbs.push(menuList[i])
if (menuList[i].child) {
menuList = menuList[i].child
}
break;
}
}
})
return breadcrumbs
}
},
methods: {
handChange () {
this.$emit('hand-change', this.breadcrumbList)
},
handleSelect (index, indexPath) {
this.indexBreadcrumbs = indexPath
}
},
created () {
this.handChange()
}
}上面的代码是模拟的数据,调用elememtUI的组件导航菜单的中的@select方法,有两个参数,可以自行打印然后在computed中计算当前选中的是哪一部分,取到返回值,然后$emit传给父组件,
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
