@vbardo/history v1.0.1

History

Router utility for vue 3 to track last address of route (e.g. redirect back to list and keep all filters, etc.)

Installation

CDN

this package published as vbardoHistory module in umd.

<script src="https://unpkg.com/@vbardo/history"></script>

NPM

npm i @vbardo/history

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { installHistory } from "@vbardo/history";

createApp(App)
    .use(router)
    .mount("#app");

installHistory(router);

Define Route

To track route you must specify a key using meta history property of route. if history key not set route not tracked.

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "home",
        component: Home,
        meta: {
            history: "home"
        }
    },
    {
        path: "/user-list",
        name: "UserList",
        component: UserList,
        meta: {
            history: "users"
        }
    },
    // This route not tracked
    {
        path: "/not-tracked-route",
        name: "About",
        component: About
    }
];

Redirect

You can use push or replace method to redirect. Redirect methods accept a fallback address, router will redirect to fallback if no history track exists.

import { defineComponent } from "vue";
import { pushHistory, replaceHistory } from "@vbardo/history";
export default defineComponent({
    setup() {
        function redirectToHome() {
            pushHistory("home", "/");
        }
        function redirectToUsers() {
            replaceHistory("users", { name: "UserList" });
        }
        return { redirectToHome, redirectToUsers };
    }
});