Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
@nlo/history-api-handler
Advanced tools
A lightweight vue component for handling javascript navigation using the browser History API.
Weekly downloads
Readme
A lightweight vue component for handling javascript navigation using the browser History API.
You can install the package through NPM.
npm install @nlo/history-api-handler
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" });
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 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" } });
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
A lightweight vue component for handling javascript navigation using the browser History API.
The npm package @nlo/history-api-handler receives a total of 92 weekly downloads. As such, @nlo/history-api-handler popularity was classified as not popular.
We found that @nlo/history-api-handler demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.