一、路由固定数据
方式一
步骤一 提取面包屑数据
1、在src文件夹下新建utils文件夹(存放通用辅助文件)
2、在utils文件夹下新建local-data.js(存放本地数据)
3、在local-data.js文件中定义一个对象存放面包屑数据
utils - local-data.js
/*-------------------------router面包屑-start---------------------------------------*/
const routerBreadcrumb = {
// 内容管理-文章管理
articleList: {
list: [
{name: "内容管理", path: ""},
{name: "文章管理", path: "/articleList"}
]
},
articleDetail: {
list: [
{name: "内容管理", path: ""},
{name: "文章管理", path: "/articleList"},
{name: "编辑", path: "/articleDetail"}
]
},
// 内容管理-首页管理
indexList: {
list: [
{name: "内容管理", path: ""},
{name: "首页管理", path: "/indexList"}
]
},
}
/*-------------------------router面包屑-end---------------------------------*/
export {
routerBreadcrumb,
// ...
}
步骤二 将面包屑数据引入路由
router - index.js
import {routerBreadcrumb} from '@/utils/local-data'
// ...
const router = new Router({
mode: 'history',
routes: [
// 文章
{
path: '/articleList',
name: 'articleList',
component: articleList,
meta: {
list: routerBreadcrumb.articleList.list
}
},
{
path: '/articleDetail',
name: 'articleDetail',
component: articleDetail,
meta: {
list: routerBreadcrumb.articleDetail.list
}
},
// 首页
{
path: '/indexList',
name: 'indexList',
component: indexList,
meta: {
list: routerBreadcrumb.indexList.list
}
},
]
})
步骤三 在vuex中定义组件的面包屑数据和改变面包屑数据的方法
store - index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
breadcumb: {}, // 面包屑
}
const mutations = {
// 赋值面包屑
changeBreadcumb (state, value) {
state.breadcumb = value
},
}
export default new Vuex.Store({
state,
mutations,
})
步骤四 在路由中将本地面包屑数据赋值给vuex的组件面包屑数据
router - index.js
import store from '@/store'
const router = new Router({
mode: 'history',
routes: []
})
router.beforeEach((to, from, next) => {
if (to.meta.list) {
let list = to.meta.list
store.commit('changeBreadcumb', { list })
}
next()
})
export default router
步骤五 封装面包屑组件
components - BreadcrumbSelf.vue
html
<div class="breadcumb">
<div class="breadcumb-list">
<div v-for="(item, i) in breadcumb.list" :key="i" class="breadcumb-link" :class="{last: i == breadcumb.list.length -1}">
<router-link :to="{path: item.path}">{{item.name}}</router-link>
<span v-if="i < breadcumb.list.length - 1"> > </span>
</div>
</div>
</div>
js
import { mapState } from 'vuex'
export default {
name: "breadcrumb-self",
computed: {
...mapState(['breadcumb'])
}
}
css
@baseColor: #fc9153;
.breadcumb{
margin-bottom: 22px;
.breadcumb-list {
.breadcumb-link{
display: inline-block;
a{
color: #666;
font-size: 12px;
}
span{
padding: 0 3px;
}
&.last{
a{
color: @baseColor
}
}
}
}
}
步骤六 使用面包屑组件
这里有两种使用方式，一种是只在一个固定的位置使用面包屑组件，另一种是在每个页面中使用面包屑组件，看设计的方式。如果在多个页面使用的话，全局注册一下即可。
番外 各个详情的返回按钮也可以按上述方式使用
返回步骤一：数据
utils - local-data.js
articleDetail: {
back: {name: "返回", path: "/articleList"},
list: [
{name: "内容管理", path: ""},
{name: "文章管理", path: "/articleList"},
{name: "编辑", path: "/articleDetail"}
]
},
返回步骤二：路由
router - index.js
{
path: '/articleDetail',
name: 'articleDetail',
component: articleDetail,
meta: {
list: routerBreadcrumb.articleDetail.list,
back: routerBreadcrumb.articleDetail.back,
}
},
返回步骤三：vuex
store - index.js
const state = {
breadcumb: {}, // 面包屑
back: {},// 返回路径
}
const mutations = {
// 赋值面包屑
changeBreadcumb (state, value) {
state.breadcumb = value
},
// 赋值返回按钮
changeBack (state, value) {
state.back = value
},
}
返回步骤四：路由使用方法赋值
router - index.js
import store from '@/store'
const router = new Router({
mode: 'history',
routes: []
})
router.beforeEach((to, from, next) => {
if (to.meta.list) {
let list = to.meta.list
store.commit('changeBreadcumb', { list })
}
if (to.meta.back) {
let back = to.meta.back
store.commit('changeBack', { back })
}
next()
})
export default router
返回步骤五：封装返回组件
components - GoBack.vue
html
<div class="go_back">
<router-link :to="{path: back.back.path}"><<{{back.back.name}}</router-link>
</div>
js
import { mapState } from 'vuex'
export default {
name: "go-back",
computed: {
...mapState(['back'])
},
}
返回步骤六：使用
全局注册，直接使用。
二、路由固定数据+非路由动态数据
更加灵活
步骤一 在vuex中定义组件的面包屑数据和改变面包屑数据的方法
store - index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
breadcumb: {
isShow: false,
list: []
}, // 面包屑
}
const mutations = {
// 赋值面包屑
changeBreadcumb (state, value) {
state.breadcumb = value
},
}
export default new Vuex.Store({
state,
mutations,
})
步骤二 封装面包屑组件
components - BreadcrumbSelf.vue
html
<div class="breadcumb" v-show="breadcumb.isShow">
<div class="breadcumb-list">
<div v-for="(item, i) in breadcumb.list" :key="i" class="breadcumb-link" :class="{last: i == breadcumb.list.length -1}">
<router-link :to="{path: item.path}">{{item.name}}</router-link>
<span v-if="i < breadcumb.list.length - 1"> > </span>
</div>
</div>
</div>
js
import { mapState } from 'vuex'
export default {
name: "breadcrumb-self",
computed: {
...mapState(['breadcumb'])
}
}
css
@baseColor: #fc9153;
.breadcumb{
height: 48px;
line-height: 48px;
.breadcumb-list {
.breadcumb-link{
display: inline-block;
a{
color: #666;
font-size: 12px;
}
span{
padding: 0 3px;
}
&.last{
a{
color: @baseColor
}
}
}
}
}
步骤三 使用面包屑组件
将面包屑组件放在指定位置，在各个组件中填充数据并控制显示，动态数据方法使用如下，在调取接口获取到动态数据后，将参数传递，调用方法。（非动态数据方法同理，不显示面包屑同理）
// 面包屑
setBreadcumb (projectName) {
let list = [
{name: "测评模块", path: ""},
{name: "项目", path: "/measure/project"},
{name: projectName, path: ""},
]
let isShow = true
this.$store.commit('changeBreadcumb', { isShow, list })
},
