https://github.com/blocka/vue-component-router

A component-based, declarative router for vue. Inspired by React Router 4
https://github.com/blocka/vue-component-router

router vue vuejs2

Last synced: about 22 hours ago
JSON representation

A component-based, declarative router for vue. Inspired by React Router 4

• Host: GitHub
• URL: https://github.com/blocka/vue-component-router
• Owner: blocka
• License: mit
• Created: 2017-03-29T03:40:59.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T02:37:30.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T19:51:41.387Z (7 months ago)
• Topics: router, vue, vuejs2
• Language: JavaScript
• Size: 715 KB
• Stars: 62
• Watchers: 3
• Forks: 8
• Open Issues: 6
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# What is this?

 This is a router based on components. It is a way of declaratively using routes, and has an api inspired by React Router 4.

# Why? What's wrong with vue-router?

Nothing really. VueRouter is a fine project, which has tons of official support, and probably supports many more use-cases and edge cases than this. However, it does force you to define your entire route structure upfront. It also creates a slight disconnect between your routes and your UI, as if they were two separate things. Using components as a router feels very natural in a component based, declarative system, which Vue is.

This was also a good excuse to try out the new provide/inject feature of Vue 2.2+

## Installation

`npm install/yarn add vue-component-router`

### Basic Usage

``` vue

    


    

        

    

    

        

    

    


import {HistoryRouter, Route, RouterLink} from 'vue-component-router';

export default {

   data () {

      return {

         contacts: ['Contact 1', 'Contact 2']

      };

   },

   components: {

      HistoryRouter,

      Route,

      Contacts: {

         props: ['contacts'],

         components: {RouterLink},

         template: `

           <ul>

                <li v-for="contact of contacts">

                   <RouterLink :to="`/contacts/${contact}`"></RouterLink>

                </li>

           </ul> `

      },

      Contact: {

         props: ['id'],

         template: `

         <div>{{id}}</div>

         `

      }

   }

}

```

### Components

## `Router`

Router acts as a provider to the various other components, or any other component which is decorated with `withRouter`, passing down the current location, and history object. It expects a location object, which has an API similar to `window.location` and a history object, with an API similar to `window.history` to be passed in as props.

## `HistoryRouter`

A component which passes the browser's history and location (via the `history` module on npm) to Router. This is what you will want to use (in a browser).

## `Route`

Take's two props, `path` and `exact`. Path takes an express style route (which is based on [path-to-regexp](https://www.npmjs.com/package/path-to-regexp)), and if the browser's location matches that path, it will show the content. The content can either be a a component, or a scopedSlot. They will be passed the router parameters, the path that matched (useful for nesting routes), and the current url (useful for building nested links), either as props, or as parameters, respectively.

Passing in `exact` as true will make the route match exactly.

``` html

   

      {{id}} {{path}} {{url}}

   

```

## `RouterLink`

Takes three props, `to`, `activeClass` (defaults to 'active') and `tag` (defaults to `a`). This will render a link tag which knows how to update the location, and will set an active class when the route matches the link. Passing in `exact` as true will only apply the active class if the route matches exactly.

## `MatchFirst`

Expects a list of `Routes` as slots, and will render the first one that matches.

## `Redirect`

Takes a prop `to`, and will cause the browser to redirect to that url

## `withRouter`

A HOC which will inject the wrapped function and inject the `router` object, which contains the `history` and `location` objects

## `withHandleClick`

A HOC that takes a component or tag, and returns a component that handles clicks similar to `RouterLink`. This enables using other components or tags as router links without `` tags.


This function takes 3 parameters: `tagOrComponent`, `to`, and `activeClass`. They correspond to the props of `RouterLink`.