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)); } }

頁面使用：

//獲取面包屑緩存 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、localstorage

2、JSON.stringify()的作用是將 JavaScript 值轉換為 JSON 字符串，JSON.parse()將JSON字符串轉為一個對象

補充知識：vue+elementUI動態生成面包屑導航

項目需要動態生成面包屑導航,并且首頁可以點擊.其余為路徑顯示

<el-menu :unique-opened='true' router :default-active='$route.path' @select='handleSelect'> <div v-for='menu in menus' :key='menu.id'> <el-menu-item v-if='!menu.child' :index='menu.path'><icon :name='menu.icon' :w='20' :h='20'></icon><span slot='title' v-text='menu.name'></span> </el-menu-item> <el-submenu v-if='menu.child' :index='menu.path'><template slot='title'> <icon :name='menu.icon' :w='20' :h='20'></icon> <span slot='title' v-text='menu.name'></span></template><el-menu-item-group> <el-menu-item v-for='subMenu in menu.child' :key='subMenu.id' v-text='subMenu.name' :index='subMenu.path'></el-menu-item></el-menu-item-group> </el-submenu> </div></el-menu>

上面的代碼是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() }}

上面的代碼是模擬的數據,調用elememtUI的組件導航菜單的中的@select方法,有兩個參數,可以自行打印

然后在computed中計算當前選中的是哪一部分,取到返回值,然后$emit傳給父組件,

<el-breadcrumb separator-class='el-icon-arrow-right'> <el-breadcrumb-item :to='{ path: ’/backstage’ }'>首頁</el-breadcrumb-item> <el-breadcrumb-item v-for='o in breadcrumbList' :key='o.id'>{{o.name}} </el-breadcrumb-item> </el-breadcrumb>

父組件中取到子組件傳過來的值后,直接渲染就行了

以上這篇vue 使用localstorage實現面包屑的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。