https://github.com/jypblue/vue-crumbs
a simple and useful breadcrumb for Vue2.js
https://github.com/jypblue/vue-crumbs
breadcrumb breadcrumbs vue vue-crumbs vue-router2 vue2
Last synced: 5 months ago
JSON representation
a simple and useful breadcrumb for Vue2.js
- Host: GitHub
- URL: https://github.com/jypblue/vue-crumbs
- Owner: jypblue
- License: mit
- Created: 2017-01-23T15:40:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-26T09:22:04.000Z (about 7 years ago)
- Last Synced: 2024-10-10T10:36:48.953Z (12 months ago)
- Topics: breadcrumb, breadcrumbs, vue, vue-crumbs, vue-router2, vue2
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-crumbs
- Size: 48.8 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-crumbs
[](https://www.npmjs.com/package/vue-crumbs) [](https://www.npmjs.com/package/vue-crumbs) [](https://www.npmjs.com/package/vue-crumbs)
a simple and useful breadcrumbs for Vue2.js
## Features
- Supports the vue-router 2.x.x
- Supports params routes
- Supports latest Firefox, Chrome, Safari, Opera and IE9+
- Compact size 2KB (1KB gzipped)
## Installation
### NPM
```
$ npm install vue-crumbs --save
```
### Bower
```
$ bower install vue-crumbs
```
### Crumbs Attributes（组件属性）
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|--------------------|--------------|
| mode | 面包屑模式，可选值为`name` `url` `mix`;`name`按照router命名模式配置面包屑，支持params路由，`url`自定义路由配置面包屑(之前的实现方式），`mix`混合模式，但是（一条完整的路径必须完整按`name` 或者`url`模式中的一个来配置，不能交叉配置） | String | mix |
| rightIcon | 间隔Icon | String | rightIcon |
### Routes Meta BreadCrumb Attributes （breadcrumb面包屑配置属性）
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|--------------------|--------------|
| icon | 面包屑名称图标 | String | 无 |
| url | 自定义URL（适用于`url`,`mix`模式） | String | 无 |
| name | 面包屑名称 | String | 无 |
| hidden | 是否隐藏 | Boolean | false |
### How To Use
```
Import:
import Vue from 'vue'
import VueCrumbs from 'vue-crumbs'
Vue.use(VueCrumbs)
Component Use:
Routes Config:
just like the Example below
```
### Example That Use In vue-cli
routes.js:
url mode config
```
const routes = {
routes:[{
path:'/',
component:page,
meta:{
breadcrumb:[{
hidden:true, //if hidden is true ,current page breadcrumbs will be hidden
url:'/',
icon: '',
name: 'Home Page'
}]
},
children:[{
path:'admin',
component:admin,
meta:{
parent:'/',
breadcrumb:[{
url: '/admin',
icon: '',
name: 'admin page'
}]
}
}]
},{
path:'/foo',
component:foo,
// if it is a query or param route
beforeEnter: (to, from, next) => {
to && (to.meta.breadcrumb[0].url = to.fullPath);
window.sessionStorage.setItem('foo',to.fullPath);
next();
},
meta:{
parent:'/',
breadcrumb:[{
url: window.sessionStorage.getItem('foo'),
name: 'foo Page'
}]
}
},{
path:'/foo/detail',
component: detail,
meta:{
parent:'/foo',
breadcrumb:[{
url: '/foo/detail',
icon: '',
name: 'detail Page'
}]
}
},{
path:'/bar',
component:bar,
meta:{
parent: '/',
breadcrumb:[{
name: 'bar page' //if no url,it will get current page url as path
}]
}
}]
};
export default routes;
```
name mode config(support params routes)
```
URL: /admin/:pid/:cid
const routes = {
routes:[{
path:'/',
component:page,
name: 'home'
meta:{
breadcrumb:{
icon: '',
hidden: true,
name: 'Home Page'
}
},
children:[{
path:'admin/:pid',
component:admin,
name: 'admin',
meta:{
parent:'home',
breadcrumb:{
icon: '',
name: 'admin page'
}
}
},{
path: 'admin/:pid/:cid',
component: child,
name: 'child',
meta: {
parent: 'admin',
breadcrumb: {
icon: '',
name: 'child page'
}
}
}]
},
]}
```
mix mode config:
```
URL:
- /admin/:pid/:cid => name mode
- /foo/detail => url mode
const routes = {
routes:[{
path:'/',
component:page,
name: 'home'
meta:{
breadcrumb:{
icon: '',
hidden: true,
name: 'Home Page'
}
},
children:[{
path:'admin/:pid',
component:admin,
name: 'admin',
meta:{
parent:'home',
breadcrumb:{
icon: '',
name: 'admin page'
}
}
},{
path: 'admin/:pid/:cid',
component: child,
name: 'child',
meta: {
parent: 'admin',
breadcrumb: {
icon: '',
name: 'child page'
}
}
}]
},{
path:'/foo',
component:foo,
meta:{
parent:'/',
breadcrumb:[{
url: '/foo',
name: 'foo Page'
}]
}
},{
path:'/foo/detail',
component: detail,
meta:{
parent:'/foo',
breadcrumb:[{
url: '/foo/detail',
icon: '',
name: 'detail Page'
}]
}
},
]}
```
main.js:
```
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueCrumbs from 'vue-crumbs'
import routes from './routes'
import App from './App'
Vue.use(VueRouter)
Vue.use(VueCrumbs)
const router = new VueRouter(routes)
const vm = new Vue({
router,
template: '',
components: {
App
}
})
```
App.vue:
```
export default {
name: 'app'
}
```
## Contribution
Welcome to report issue and fork it
## License
[MIT](http://opensource.org/licenses/MIT)