History

Router utility for Vue Router 4 to track last address of route (e.g. redirect back to list from edit page and keep all filters)

Installation

CDN

this package published as vHistory module in umd.

1<script src="https://unpkg.com/@bardoui/vhistory"></script>

NPM

1npm i @bardoui/vhistory

1import { createApp } from "vue";
2import App from "./App.vue";
3import router from "./router";
4import { installHistory } from "@bardoui/vhistory";
5
6createApp(App)
7  .use(router)
8  .mount("#app");
9
10installHistory(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.

1const routes: Array<RouteRecordRaw> = [
2  {
3    path: "/",
4    name: "home",
5    component: Home,
6    meta: {
7      history: "home"
8    }
9  },
10  {
11    path: "/user-list",
12    name: "UserList",
13    component: UserList,
14    meta: {
15      history: "users"
16    }
17  },
18  // This route not tracked
19  {
20    path: "/not-tracked-route",
21    name: "About",
22    component: About
23  }
24];

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.

1import { defineComponent } from "vue";
2import { pushHistory, replaceHistory } from "@bardoui/vhistory";
3export default defineComponent({
4  setup() {
5    function redirectToHome() {
6      pushHistory("home", "/");
7    }
8    function redirectToUsers() {
9      replaceHistory("users", { name: "UserList" });
10    }
11    return { redirectToHome, redirectToUsers };
12  }
13});