<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>面包屑组件</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="/webjars/element-ui/lib/theme-chalk/index.css">
	<!-- 自定义样式 -->
	<link rel="stylesheet" href="/fragments/breadcrumb.css">
</head>
<body>
<div id="breadcrumb" th:fragment="breadcrumb">
<el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if='item.meta.title'>
        <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.meta.title}}</span>
        <router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
      </el-breadcrumb-item>
    </transition-group>
</el-breadcrumb>
<p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>
</body>
<!-- import Vue before Element -->
<script type="text/javascript" src="/webjars/vue/vue.js"></script>
<script type="text/javascript" src="/webjars/vue-router/dist/vue-router.js"></script>
<script type="text/javascript" src="/webjars/vue-resource/dist/vue-resource.js"></script>
<!-- import JavaScript -->
<script type="text/javascript" src="/webjars/element-ui/lib/index.js"></script>
<script type="text/javascript" src="/fragments/breadcrumb.js"></script>
</html>