<!-- Breadcrumb/index.vue --> ? ?
<template>
? <div>
? ? <el-breadcrumb class="breadcrumb" separator="/">
? ? ? <transition-group name="breadcrumb">
? ? ? ? <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.path">
? ? ? ? ? <span
? ? ? ? ? ? v-if="
? ? ? ? ? ? ? item.redirect === $route.path || index == breadList.length - 1
? ? ? ? ? ? "
? ? ? ? ? >
? ? ? ? ? ? {{ item.meta.title }}
? ? ? ? ? </span>
? ? ? ? ? <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
? ? ? ? </el-breadcrumb-item>
? ? ? </transition-group>
? ? </el-breadcrumb>
? </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
? data () {
? ? return {
? ? ? // 路由集合
? ? ? breadList: [] as any[]
? ? };
? },
? methods: {
? ? // 判斷是否包含首頁路由
? ? isDashboard (route: { name: string }) {
? ? ? const name = route && route.name;
? ? ? if (!name) {
? ? ? ? return false;
? ? ? }
? ? ? return route.name === 'Dashboard';
? ? },
? ? // 面包屑跳轉(zhuǎn)
? ? handleLink (item: { redirect: any; path: any }) {
? ? ? const { redirect, path } = item;
? ? ? redirect ? this.$router.push(redirect) : this.$router.push(path);
? ? },
? ? // 判斷當(dāng)前面包屑
? ? init () {
? ? ? this.breadList = [];
? ? ? this.$route.matched.forEach((item) => {
? ? ? ? if (item.meta.title) {
? ? ? ? ? this.breadList.push(item);
? ? ? ? }
? ? ? });

? ? ? if (!this.isDashboard(this.breadList[0])) {
? ? ? ? this.breadList.unshift({
? ? ? ? ? path: '/dashboard/index',
? ? ? ? ? meta: { title: '首頁' }
? ? ? ? });
? ? ? }
? ? }
? },
? created () {
? ? this.init();
? },
? // 當(dāng)組件放在總布局組件中，需要監(jiān)聽路由變化
? watch: {
? ? $route () {
? ? ? this.init();
? ? }
? }
});
</script>

<style lang="less" scoped>
.breadcrumb-enter-active,
.breadcrumb-leave-active {
? transition: all 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
? opacity: 0;
? transform: translateX(20px);
}

.breadcrumb-move {
? transition: all 0.5s;
}

.breadcrumb-leave-active {
? position: absolute;
}
</style>

<template>
? <div>
? ? <my-breadcrumb></my-breadcrumb>
? ? four
? </div>
</template>

<script lang="ts">
import Vue from 'vue';
import MyBreadcrumb from '@/components/Breadcrumb/index.vue';

export default Vue.extend({
? components: {
? ? MyBreadcrumb
? }
});
</script>

<style scoped>
</style>

// router/index.ts

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '@/views/login/index.vue';
import Layout from '@/layout/index.vue';

Vue.use(VueRouter);

/**
?* hidden 表示是否需要在側(cè)邊導(dǎo)航欄出現(xiàn) ，true表示不需要
?* isFirst 表示是否只有一級權(quán)限，只出現(xiàn)在只有一個子集，沒有其他孫子集
?* 當(dāng)權(quán)限擁有多個子集或者孫子集，一級權(quán)限需要加上 meta
?* 二級權(quán)限擁有子集，也必須有 meta
?*/

// 基礎(chǔ)路由
export const constantRoutes = [
? {
? ? path: '/redirect',
? ? component: Layout,
? ? hidden: true,
? ? children: [
? ? ? {
? ? ? ? path: '/redirect/:path(.*)',
? ? ? ? component: () => import('@/views/redirect/index.vue')
? ? ? }
? ? ]
? },
? {
? ? path: '/',
? ? redirect: '/dashboard',
? ? hidden: true
? },
? {
? ? path: '/login',
? ? name: 'Login',
? ? component: Login,
? ? hidden: true
? },
? {
? ? path: '/dashboard',
? ? component: Layout,
? ? redirect: '/dashboard/index',
? ? isFirst: true,
? ? children: [
? ? ? {
? ? ? ? path: 'index',
? ? ? ? name: 'Dashboard',
? ? ? ? component: () => import('@/views/dashboard/index.vue'),
? ? ? ? meta: {
? ? ? ? ? title: '首頁',
? ? ? ? ? icon: 'el-icon-location'
? ? ? ? }
? ? ? }
? ? ]
? }
];

// 動態(tài)路由
export const asyncRoutes = [
? {
? ? path: '/form',
? ? component: Layout,
? ? redirect: '/form/index',
? ? isFirst: true,
? ? children: [
? ? ? {
? ? ? ? path: 'index',
? ? ? ? name: 'Form',
? ? ? ? component: () => import('@/views/form/index.vue'),
? ? ? ? meta: {
? ? ? ? ? title: '表單',
? ? ? ? ? role: 'form',
? ? ? ? ? icon: 'el-icon-location'
? ? ? ? }
? ? ? }
? ? ]
? },
? {
? ? path: '/editor',
? ? component: Layout,
? ? redirect: '/editor/index',
? ? meta: {
? ? ? role: 'editors',
? ? ? title: '總富文本',
? ? ? icon: 'el-icon-location'
? ? },
? ? children: [
? ? ? {
? ? ? ? path: 'index',
? ? ? ? name: 'Editor',
? ? ? ? component: () => import('@/views/editor/index.vue'),
? ? ? ? meta: {
? ? ? ? ? title: '富文本',
? ? ? ? ? role: 'editor',
? ? ? ? ? icon: 'el-icon-location'
? ? ? ? }
? ? ? },
? ? ? {
? ? ? ? path: 'two',
? ? ? ? name: 'Two',
? ? ? ? redirect: '/editor/two/three',
? ? ? ? component: () => import('@/views/editor/two.vue'),
? ? ? ? meta: {
? ? ? ? ? title: '二級導(dǎo)航',
? ? ? ? ? role: 'two',
? ? ? ? ? icon: 'el-icon-location'
? ? ? ? },
? ? ? ? children: [
? ? ? ? ? {
? ? ? ? ? ? path: 'three',
? ? ? ? ? ? name: 'Three',
? ? ? ? ? ? component: () => import('@/views/editor/three.vue'),
? ? ? ? ? ? meta: {
? ? ? ? ? ? ? title: '三級導(dǎo)航',
? ? ? ? ? ? ? role: 'three',
? ? ? ? ? ? ? icon: 'el-icon-location'
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? path: 'four',
? ? ? ? ? ? name: 'Four',
? ? ? ? ? ? component: () => import('@/views/editor/four.vue'),
? ? ? ? ? ? meta: {
? ? ? ? ? ? ? title: '三級導(dǎo)航2',
? ? ? ? ? ? ? role: 'four',
? ? ? ? ? ? ? icon: 'el-icon-location'
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ]
? ? ? }
? ? ]
? },
? {
? ? path: '/tree',
? ? component: Layout,
? ? redirect: '/tree/index',
? ? isFirst: true,
? ? children: [
? ? ? {
? ? ? ? path: 'index',
? ? ? ? name: 'Tree',
? ? ? ? component: () => import('@/views/tree/index.vue'),
? ? ? ? meta: {
? ? ? ? ? title: '樹狀圖',
? ? ? ? ? role: 'tree',
? ? ? ? ? icon: 'el-icon-location'
? ? ? ? }
? ? ? }
? ? ]
? },
? {
? ? path: '/excel',
? ? component: Layout,
? ? redirect: '/excel/index',
? ? isFirst: true,
? ? children: [
? ? ? {
? ? ? ? path: 'index',
? ? ? ? name: 'Excel',
? ? ? ? component: () => import('@/views/excel/index.vue'),
? ? ? ? meta: {
? ? ? ? ? title: '導(dǎo)入導(dǎo)出',
? ? ? ? ? role: 'excel',
? ? ? ? ? icon: 'el-icon-location'
? ? ? ? }
? ? ? }
? ? ]
? }
];

// 出錯跳轉(zhuǎn)的路由
export const error = [
? // 404
? {
? ? path: '/404',
? ? component: () => import('@/views/error/index.vue'),
? ? hidden: true
? },
? {
? ? path: '*',
? ? redirect: '/404',
? ? hidden: true
? }
];

const createRouter = () =>
? new VueRouter({
? ? scrollBehavior: () => ({
? ? ? x: 0,
? ? ? y: 0
? ? }),
? ? routes: constantRoutes
? });

const router = createRouter();

// 刷新路由
export function resetRouter () {
? const newRouter = createRouter();
? (router as any).matcher = (newRouter as any).matcher;
}

export default router;