<>效果图

<>1.vuex配置
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new
Vuex.Store({ state: { bread: [] }, mutations: { }, actions: { } })
<>2. App中监听$route
watch: { $route: { handler(val){ this.$store.state.bread = val.matched; } },
immediate: true }
<>$route打印结果

<>matched中的 name 为路由配置中的name值 <>matched中的 path 为路由配置中的path值 { path: '/home',
name: '首页', component: ()=>import('../views/home') }
<>3.组件代码
<template> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb
-item v-for="(i,k) in $store.state.bread" :key="k" :to="{ path: i.path }">{{i.
name}}</el-breadcrumb-item> </el-breadcrumb> </template>

技术
©2019-2020 Toolsou All rights reserved,
Element-Ui组件 Message 消息提示, alert 弹窗Java:案例理解-接口回调element-ui踩坑记录【Golang 基础系列十】Go 语言 条件语句之if使用css样式设计一个简单的html登陆界面2020顺丰前端暑期实习面经(已过)无孔化就是手机的未来?还有很多问题需要解决【C#】实现学生成绩信息管理系统云原生应用如何做到低成本获得高稳定?用HTML+CSS做一个漂亮简单的个人网页