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-redirectUsage
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
➜ 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 testOptions
| 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 |