- Notifications
You must be signed in to change notification settings - Fork18
Smart route search to make intelligent looking apps with Vue.js.
License
f/vue-smart-route
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Make your users dynamically navigate routes, make smart commands and queries with a single directive.
Vue Smart Route allows you to create aquery system based on yourroutes. You can simply create a command input that createssmart actions, both static routes and theasync ones:
yarn add vue-smart-routeThen install it:
importVuefrom'vue'importVueRouterfrom'vue-router'importVueSmartRoutefrom'vue-smart-route'Vue.use(VueRouter)Vue.use(VueSmartRoute)
This is a well known route inVueRouter:
routes:[{name:'about',path:'/about'}]
To make itsmart route, just add asmart key:
routes:[{name:'about',path:'/about',// Adding smart key with `matcher` and `handler` (optional)smart:{matcher:{search:[/about/],title:()=>'About us'}}}]
Then, you need to usev-smart-routes directive to connect possible routes you asked withsearch:
<template> <inputtype="text"v-model="search"v-smart-routes="routes"></template><script>exportdefault {data () {return { search:'', routes: [] } }}</script>
Now,routes andsearch are connected each other androutes will besmartly calculated according tosearch property.
Following examples are styled.
vue-smart-routedoes not contain any style or component.
You can check/example to see a working example.
vue-smart-route is simple yet powerful. You can extend your logic tomake your route smarter.
Let's create a smart/search route:
{name:'search',path:'/search',component:()=>import('./Search.vue'),smart:{matcher:{// Named RegExp will be passed to the `title` function:search:[/^search\:?\s+(?<query>.+)/i],title:({ query})=>`Search about *${query}*`}}}
When you click to the link, it will be navigated to the/search?query=how+to+be+smart.
Then you'll be able to access to the query using$route.query.query from your view.
You can simply make your search smarter by adding more logic:
{name:'mail',path:'/mail',component:()=>import('./SendMail.vue'),smart:{matcher:{search:[/(?<email>[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*)/i,/(?<email>[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*)\s+(?<subject>\w+)/i],title({ email, subject}){if(subject){return`Send email to *${email}* with subject *${subject}*`;}return`Send email to *${email}*`;}}}}
- You can pass multiple
RegExpfor search, titlegets all the named matches and may include logic.
It lists all the routes.
vue-smart-route includes only a directive that makes all the magic.
Directive requires to be bound aninput with av-model, and usingv-smart-routes you will bind results to another property.
E.g. if you bindv-smart-routes toresults property, it will be an array of route objects.
| key | Type | Description |
|---|---|---|
name | String | Route name, e.g.home |
path | String | Route path, e.g./ |
title | String | Route title generated bytitle function of the smart route |
handler | Function | A function that triggers the navigation. It can be overriden. |
handler navigates to page by default, but it can be changed.
Let's makeemail example smarter by changing the navigation handler:
{name:'mail',path:'/mail',component:()=>import('./SendMail.vue'),smart:{matcher:{search:[/(?<email>[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*)/i,/(?<email>[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*)\s+(?<subject>\w+)/i],title({ email, subject}){if(subject){return`Send email to *${email}* with subject *${subject}*`;}return`Send email to *${email}*`;}},// Customizing the handlerhandler(route,next){if(route.query.subject){location.href=`mailto:${route.query.email}?subject=${route.query.subject}`;// Calling next will continue navigation by default, you can redirect or just stop here.next(route);return;}location.href=`mailto:${route.query.email}`;next(route);}}}
According to this example, you will be able to navigate your user to the mail application.
vue-smart-route supportsasync routes that you can generate routes on demand, on runtime. To do that, you should useasync routes method to matcher:
smart:{matcher:{search:[/swapi\s(?<query>.*)/],asyncroutes({ query}){constpeople=awaitfetch(`https://swapi.co/api/people/?search=${encodeURIComponent(query)}`).then(r=>r.json())returnpeople.results.map(character=>({name:'character',title:`Go to character *${character.name}*`,params:{url:character.url}}))}}}
This will help you to generate new routes dynamically:
You can also usei18n features invue-smart-route:
search,title andhandler takesctx parameters which you can access to current component.
routes:[{name:'about',path:'/about',smart:{matcher:{search:(ctx)=>{switch(ctx.$i18n.locale){case'tr':return[/hakkinda/]case'en':default:return[/about/]}},title:({},ctx)=>ctx.$i18n.t('navigation.about_us')},handler(route,next,ctx){location.href=`https://${ctx.i18n.locale}.example.com/about`}}}]
MIT.
About
Smart route search to make intelligent looking apps with Vue.js.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.