Thanks to visit codestin.com
Credit goes to github.com

Skip to content

docs(b-nav): add example markup for using vue-router/nuxt-child (closes #3999) #4000

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 3, 2019
Merged

docs(b-nav): add example markup for using vue-router/nuxt-child (closes #3999) #4000

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5f85314
docs(b-nav): add example markup for using vue-router/nuxt-child (clos…
tmorehouse Sep 3, 2019
1b0aaaa
Update README.md
tmorehouse Sep 3, 2019
a6e87bc
Update README.md
tmorehouse Sep 3, 2019
588d959
Update README.md
tmorehouse Sep 3, 2019
0bc6e21
Update README.md
tmorehouse Sep 3, 2019
cdb89d5
Update README.md
jacobmllr95 Sep 3, 2019
88d5424
Merge branch 'tmorehouse/nav-docs' of https://github.com/bootstrap-vu…
jacobmllr95 Sep 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/components/nav/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,64 @@ The `card-header` prop is only needed when you are applying `tabs` or `pills` st

The `card-header` prop has no effect if the `<b-nav>` is `vertical`.

### Using with Vue Router

Have your card `<b-nav>` control vue router nested routes via `<router-view>` or `<nuxt-child>`
components, to created tabbed content that changes with route URL:

```html
// On page with route `/some/route`
<div>
<b-card title="Card Title" body-class="text-center">
<template v-slot:header>
<b-nav card-header tabs>
<!-- <b-nav-item>'s with child routes. Note the trailing slash on the first <b-nav-item> -->
<b-nav-item to="/some/route/" exact exact-active-class="active">Active</b-nav-item>
<b-nav-item to="/some/route/foo" exact exact-active-class="active">Foo</b-nav-item>
<b-nav-item to="/some/route/bar" exact exact-active-class="active">Bar</b-nav-item>
</b-nav>
</template>

<!-- Child route gets rendered in <router-view> or <nuxt-child> -->
<router-view></router-view>
<!-- Or if using Nuxt.js
<nuxt-child></nuxt-child>
-->
</b-card>
</div>
```

Note: Vue Router does not support defining active routes with hashes (`#`), which is why you must
define the "tab" content as child routes.

**Example router config for above:**

<!-- eslint-disable no-unused-vars, no-undef -->

```js
const routes = [
{
path: '/some/route',
component: SomeRouteComponent,
// Child route "tabs"
children: [
{ path: '', component: DefaultTabComponent },
{ path: 'foo', component: FooTabComponent },
{ path: 'bar', component: BarTabComponent }
]
}
]
```

One can also use Vue Router
[named routes](https://router.vuejs.org/guide/essentials/named-routes.html#named-routes) and/or
route params instead of path based routes.

For more details see:

- [Vue Router `<router-view>`](https://router.vuejs.org/api/#router-view)
- [Nuxt.JS `<nuxt-child>`](https://nuxtjs.org/api/components-nuxt-child)

## Accessibility

If you're using `<b-nav>` to provide a navigation bar, be sure to add a `role="navigation"` to the
Expand Down