https://github.com/ilyasemenov/vue-router-navigation

vue-router helper for generating navigation links
https://github.com/ilyasemenov/vue-router-navigation

vue-router

Last synced: 11 days ago
JSON representation

vue-router helper for generating navigation links

• Host: GitHub
• URL: https://github.com/ilyasemenov/vue-router-navigation
• Owner: IlyaSemenov
• License: mit
• Created: 2024-04-19T04:21:14.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-10-31T03:49:35.000Z (17 days ago)
• Last Synced: 2024-10-31T04:20:49.275Z (17 days ago)
• Topics: vue-router
• Language: TypeScript
• Homepage:
• Size: 74.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-router-navigation

`vue-router` helper for generating navigation links when using deeply nested paths.

## Install

```sh

npm install vue-router-navigation

```

## Use

Given a set of nested `vue-router` pages, such as:

- `/orders/123` — main order page

- `/orders/123/details/address` — order address details

- `/orders/123/details/billing` — order billing details

- `/orders/123/tracking` — order tracking

Generate navigation links for Order, Details and Tracking in `pages/orders/[order_id].vue`:

```vue

import { useRouteNavigation } from "vue-router-navigation"

const { prefix } = useRouteNavigation()

  


    

      Order

    

    

      Details

    

    

      Tracking

    

  

  


```

Generate navigation links for Address and Billing in `pages/orders/[order_id]/details.vue`:

```vue

import { useRouteNavigation } from "vue-router-navigation"

const { prefix } = useRouteNavigation()

  


    

      Address

    

    

      Billing

    

  

  


```

### Active page

Sometimes vue-router auto-injected CSS classes are not enough. You can explicitly check the active page with:

```vue

import { useRouteNavigation } from "vue-router-navigation"

const { prefix, page } = useRouteNavigation()

  


    


      

        Order

      

    

    


      

        Details

      

    

    


      

        Tracking

      

    

  

  


```

## Nuxt

For Nuxt, create `composables/router-navigation.ts`:

```ts

import { useRoute } from "nuxt/app"

import { useRouteNavigation as useRouteNavigationBase } from "vue-router-navigation"

export const useRouteNavigation = () => useRouteNavigationBase(useRoute())

```

TODO: implement this as a Nuxt module.