https://github.com/softchef/vuejs2-breadcrumbs
Vuejs breadcrumbs
https://github.com/softchef/vuejs2-breadcrumbs
breadcrumbs vuejs
Last synced: 8 months ago
JSON representation
Vuejs breadcrumbs
- Host: GitHub
- URL: https://github.com/softchef/vuejs2-breadcrumbs
- Owner: SoftChef
- Created: 2018-09-05T09:17:32.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-06-16T01:30:13.000Z (about 5 years ago)
- Last Synced: 2025-01-31T01:16:50.965Z (over 1 year ago)
- Topics: breadcrumbs, vuejs
- Language: JavaScript
- Homepage:
- Size: 1.13 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vuejs2-breadcrumbs
## Installation
Install via NPM
```
$ npm install vuejs2-breadcrumbs
```
...and require the plugin like so:
```
import VueBreadcrumbs from 'vuejs2-breadcrumbs'
Vue.use(VueBreadcrumbs)
```
### Options
```
let options = {}
// Customize element name
options.name = 'app-breadcrumbs'
// Customize template
options.template = VueCompoent || '...'
// You can register breadcrumbs in options, or also can use VueBreadcrumbs.register(name, callback)
options.breadcrumbs = {
home() {
return {
parent: null,
links: [
{
text: 'Home',
to: {
name: 'home' // use for vue-router
}
}
]
}
}
}
Vue.use(VueBreadcrumbs, options)
```
## Register
```
VueBreadcrumbs.register(name, callback)
```
Register the "Root" node
```
VueBreadcrumbs.register('home', () => {
return {
parent: null,
links: [
{
text: 'Home',
to: {
name: 'home' // use for vue-router
}
}
]
}
})
```
Register children node under "Root"
```
VueBreadcrumbs.register('users', () => {
return {
parent: 'home',
links: [
{
text: 'Users',
to: {
name: 'users' // use for vue-router
}
}
]
}
})
```
Register leaf node under "users" and with parameters
```
VueBreadcrumbs.register('user.profile', ({ user }) => {
return {
parent: 'users',
links: [
{
text: `User: ${user.name}`,
to: {
name: 'user.profile', // use for vue-router
params: {
user_id: user.id
}
}
}
]
}
})
```
## Display
> Breadcrumbs will auto match the route name, if you have register.
Common
```
```
With your parameters
```
```
## this.$breadcrumbs(register_name, params)
You can use ```this.$breadcrumbs``` to get the nodes by name and parameters
```
export default {
data() {
return {
user: {
id: 1,
name: 'User1'
}
}
},
mounted() {
let nodes = this.$breadcrumbs('user.profile', user)
// Display nodes by self
}
}
```
## Customize Template
Sample - Use on Vuetify design
```
{{ node.text }}
export default {
props: [
'params',
'divider',
'current_route'
],
computed: {
nodes() {
const breadcrumb_name = this.current_route || this.$route.name
if (breadcrumb_name) {
// this.$breadcrumbs() can get the nodes by name and parameters
return this.$breadcrumbs(breadcrumb_name, this.params)
} else {
return []
}
}
}
}
```
## License
This SDK is distributed under the GNU GENERAL PUBLIC LICENSE Version 3, see LICENSE for more information.