Scrum / Vue 2 Breadcrumbs
Licence: mit
Vue breadcrumbs
Stars: ✭ 76
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Vue 2 Breadcrumbs
vue-crumbs
a simple and useful breadcrumb for Vue2.js
Stars: ✭ 16 (-78.95%)
Mutual labels: breadcrumbs, vue2
Aspnetcore Vue Starter
*NEW* Asp.net Core & Vue.js (ES6) SPA Starter kit - Vuex, webpack, Web API, Docker, and more! By @TrilonIO
Stars: ✭ 1,182 (+1455.26%)
Mutual labels: vue2
Vue Cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区,使用webpack2打包
Stars: ✭ 1,134 (+1392.11%)
Mutual labels: vue2
Tsadmin
asp.net web api 2 + vue.js +elementui 实现的前/后端分离的后台管理系统框架示例程序。
Stars: ✭ 70 (-7.89%)
Mutual labels: vue2
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-19.74%)
Mutual labels: vue2
Docker Nuxt
Docker image to run NUXT.js application in production mode
Stars: ✭ 71 (-6.58%)
Mutual labels: vue2
Vue2.0 Taopiaopiao
vue2.0+router+vuex+express 构建淘票票的全栈demo
Stars: ✭ 1,152 (+1415.79%)
Mutual labels: vue2
Vue Admin
基于Vue2、element ui、vue-cli、vuex、vue-router、axios 、echarts后台管理系统demo. 权限管理,用户管理,菜单管理。无限级菜单,下拉树形选择框
Stars: ✭ 1,135 (+1393.42%)
Mutual labels: vue2
Electron Vue Webpack
A minimal Electron + Vue 2 + Webpack 2 setup for quick development.
Stars: ✭ 70 (-7.89%)
Mutual labels: vue2
Ng2 Breadcrumbs
A breadcrumb service for the Angular 7 router
Stars: ✭ 61 (-19.74%)
Mutual labels: breadcrumbs
Vue Admin Element
(Vue2 演示项目)物业后台管理系统 - ElementUI ( 基本结构已完成, 剩下的就是具体业务开发; 如有疑问请留言 )
Stars: ✭ 73 (-3.95%)
Mutual labels: vue2
breadcrumbs
Vue breadcrumbs builds on the official vue-router package to provide simple breadcrumbs. Demo
Support
- Support SSR
- Setting parent route without need to actually nest it in children array
- Customized template
- Dynamic breadcrumbs
- Dynamic parent
- Dynamic label
- Shorthand labeling (
breadcrumb: 'Page Label'
) - Sub-routing
Install
$ npm install vue-2-breadcrumbs
Note: This project is compatible with node v10+
Usage
import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';
import App from './App.vue';
Vue.use(VueBreadcrumbs);
Note: After that
<Breadcrumbs/>
component would be at your disposal.
Meta in router
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: { template: '<h2>Home</h2>' },
meta: {
breadcrumb: 'Home'
}
},
{
path: '/params',
name: 'Params',
component: { template: '<h2>Params</h2>' },
meta: {
breadcrumb: routeParams => `route params id: ${routeParams.id}`
}
},
{
path: '/context',
name: 'Context',
component: { template: '<h2>Context</h2>' },
meta: {
breadcrumb() {
const { name } = this.$route;
return `name "${name}" of context route`;
}
}
},
{
path: '/parent',
component: { template: '<router-view/>' },
meta: {
breadcrumb: {
label: 'Parent to Params',
parent: 'Params'
}
},
{
name: 'dynamic-parent',
path: '/dynamic-parent',
component: { template: '<h2>Dynamic Parent</h2>' },
meta: {
breadcrumb() {
const { name } = this.$route;
return {
label: name,
parent: 'settings'
};
}
}
}
]
});
Options
An options object can also be passed into the plugin to specify your own template and rendering methods if desired. For example:
import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';
Vue.use(VueBreadcrumbs, {
template:
' <nav v-if="$breadcrumbs.length" aria-label="breadcrumb">\n' +
' <ol class="breadcrumb">\n' +
' <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
' <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
' </li>\n' +
' </ol>\n' +
' </nav>'
});
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].