创建一个公共组件:
nav.vue
一般在components文件夹里。
nav组件 中可以设置一个导航组件:
<template><el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>{{level1}}</el-breadcrumb-item>
<el-breadcrumb-item>{{level2}}</el-breadcrumb-item></el-breadcrumb></template><script>
export default {
name: "Mynav",
props:["level1","level2"]
}</script><style scoped></style>
然后再main.js(入口文件)中定义全局组件
import MyBread from '@/components/common/nav.vue'
Vue.component("Mynav", Mynav);//全局自定义组件
最后在用到这个组件的地方引用即可
<Mynav level1="用户管理" level2="用户列表"></
Mynav>