Contact us
Get started

Directory

← Back

client-link

The official repository of the webcomponent client-link

Author

Contributors

Rating

Links

client-link

Published on webcomponents.org

Client-link is a simple webcomponent for client side routing.

The component uses the history api to update the url and dispatches the pathchanged event whenever the element is clicked.

It also adds the active class to itself when the url matches the path specified.

Installation

npm install client-link or yarn add client-link

Usage

Note: the recommended way of using client-link is together with client-route.

html

<script src="node_modules/client-link/index.js"></script>
<client-link to="/"> Home </client-route>
<client-link to="/about"> About </client-route>

listening for pathchanged events

window.addEventListener("pathchanged", _ => {
    console.log(window.location.pathname);
})

Attributes

to

The url gets set to the path of the to attribute whenever the element is clicked.

<client-route to="/"></client-route>

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

LICENSE

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2018-10-05
Maturity
IMPORTED
License
ISC License

Compatibility

Framework
Browser
Browser Independent

client-link - Vaadin Add-on Directory

The official repository of the webcomponent client-link client-link - Vaadin Add-on Directory
# client-link [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/client-link) Client-link is a simple webcomponent for client side routing. The component uses the history api to update the url and dispatches the `pathchanged` event whenever the element is clicked. It also adds the `active` class to itself when the url matches the path specified. ## Installation `npm install client-link` or `yarn add client-link` ## Usage **Note**: the recommended way of using client-link is together with [client-route](https://github.com/TimUntersberger/client-route). html ```html Home About ``` listening for pathchanged events ```javascript window.addEventListener("pathchanged", _ => { console.log(window.location.pathname); }) ``` ## Attributes ### to The url gets set to the path of the `to` attribute whenever the element is clicked. ```html ``` ## Contributing 1. Fork it! 2. Create your feature branch: `git checkout -b my-new-feature` 3. Commit your changes: `git commit -am 'Add some feature'` 4. Push to the branch: `git push origin my-new-feature` 5. Submit a pull request :D ## License [LICENSE](LICENSE)
Online