vue-typo-redirect

Make your users happy with catch typos with middleware and redirect to right one.

Works with Vue

Install

  npm i vue-typo-redirect

Usage

Add wildcard route and set component as TypoRedirect. It gets the request path and analyzes it with rules and redirects.

import TypoRedirect from "vue-typo-redirect";

const routes = [
    ...
  {
    path: "**",
    component: TypoRedirect,
    props: (route) => ({
      currentRoute: route,
      routes: [ "/chat", "/about/:id"],
    }),
  },
];

If you don't want to make an array with manuel processing then don't add prop it will gather all defined routes from this.$router except "**" and "/".

import TypoRedirect from "vue-typo-redirect";

const routes = [
    ...
  {
    path: "**",
    component: TypoRedirect,
    props: (route) => ({
      currentRoute: route,
    }),
  },
];

Demo

Tests

➜ curl "http://localhost:3000/abouc/"           
Found. Redirecting to /about/%                                                                                                                                                                             

➜ curl "http://localhost:3000/abouct/"
Found. Redirecting to /about/%    

➜ curl "http://localhost:3000/chay/123"
Found. Redirecting to /chat/123%     

Tests

  npm run test

Options

Parameter	Type	Desc
routes	array<string>	whitelist routes
levenThreshold	number	the levenstein algorithm's threshold value
fuzzyThreshold	number	fuzzy comparasion algorithm's threshold value
currentRoute	object	vue routers route prop
wildcardRoute	string	if it cant redirect any route redirect to 404 page or another wildcard strategy component

Lisans

MIT