Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@nlo/history-api-handler

Package Overview
Dependencies
Maintainers
10
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nlo/history-api-handler

A lightweight vue component for handling javascript navigation using the browser History API.

  • 1.1.12
  • latest
  • npm
  • Socket score

Version published
Maintainers
10
Created
Source

History api handler

A lightweight vue component for handling javascript navigation using the browser History API.

Installation

You can install the package through NPM.

npm install @nlo/history-api-handler

Usage

The history api handler package provides an extendable component that allows persisting state/view changes in the browser url. A use case for using this handler is for example in a page that has several modals. Opening these modals with certain state can be attached to a specific url and parsed on page load and vue mount.

To use it, import the component and extend your component and provide a routes array in the created hook of the vue instance.

@Component
export default class SubscriptionEditor extends HistoryApiHandler {
	created() {
		this.routes = [
			{
				name: "overview",
				path: "/",
				action: () => {},
			},
			{
				name: "modal",
				path: "/modal",
				action: () => {
					this.$refs.modal.open();
				},
			},
		];
	}
}

A route requires a name, a path and an action. The action runs once the component is created and provides you with the means to open a modal for example or change the state of the page.

To change a route manually after the initial route is parsed, you can use the pushRoute function:

this.pushRoute({ name: "modal" });

Route params

It is also possible to pass dynamic route parameters to the route path that will be parsed and passed as an object in the action function. For example to open a modal with a certain id:

this.routes = [
	{
		name: "modal-with-params",
		path: "/modal/:id",
		action: (params) => {
			if (params.id) {
				this.$refs.modal.open(params.id);
			}
		},
	},
];

this.pushRoute({ name: "modal", params: { id: "1" } });

Query strings

Query strings if present in the path will be parsed and provided as a second argument to the action function:

this.routes = [
	{
		name: "modal-with-query",
		path: "/modal",
		action: (params, query) => {
			if (query.id) {
				this.$refs.modal.open(query.id);
			}
		},
	},
];

this.pushRoute({ name: "modal", query: { id: "1" } });

On leave hook

It is also possible to execute code before a route is switched:

this.routes = [
	{
		name: "modal",
		path: "/modal",
		action: () => {
			this.$refs.modal.open();
		},
		onLeave: () => {
			this.$refs.modal.close();
		},
	},
];

FAQs

Package last updated on 23 Oct 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc