Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3201450

Browse files
committed
add async route generation feature
1 parent7a972b6 commit3201450

File tree

8 files changed

+395
-187
lines changed

8 files changed

+395
-187
lines changed

‎.babelrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"presets": ["@babel/preset-env"],
33
"plugins": [
4+
"@babel/plugin-transform-runtime",
45
"@babel/plugin-syntax-dynamic-import"
56
],
67
"comments":false

‎README.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,43 @@ Let's make `email` example smarter by changing the navigation handler:
209209

210210
According to this example, you will be able to navigate your user to the mail application.
211211

212+
##Async Route Generation (Autocomplete-like)
213+
214+
**vue-smart-route** supports`async routes` that you can generate routes on demand, on runtime.
215+
216+
To to that, you should use`async routes` method to matcher:
217+
218+
Assume we have and endpoint`/users?q=fa` that responses an user array:
219+
220+
```json
221+
[
222+
{"id":1,"username":"fatih" },
223+
{"id":2,"username":"fauda" }
224+
]
225+
```
226+
227+
```js
228+
smart: {
229+
matcher: {
230+
search: [/users\s(?<query>.*)/],
231+
asyncroutes ({ query }) {
232+
constusers=awaitfetch('https://api.example.com/users')
233+
constusersArray=awaitusers.json()
234+
235+
returnusersArray.map(({ id, username })=> {
236+
return {
237+
name:'goToUser',
238+
params: { id },
239+
title:`Go to user *${username}*`
240+
}
241+
})
242+
}
243+
}
244+
}
245+
```
246+
247+
This will help you to generate new routes dynamically.
248+
212249
##i18n
213250

214251
You can also use`i18n` features in`vue-smart-route`:

‎dist/vue-smart-route.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎example/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<divid="app">
33
<header>
44
<inputplaceholder="search or run something..."type="text"v-model='query'v-smart-routes='routes'>
5-
<p>You can write <b>about</b>, <b>search: {query}</b>, <b>user {username}</b>, <b>user {id}</b>, <b>user {username} {id}</b> or <b>a mail address and the subject</b></p>
5+
<p>You can write <b>about</b>, <b>search: {query}</b>, <b>user {username}</b>, <b>user {id}</b>, <b>user {username} {id}</b> or <b>a mail address and the subject</b>, also <b>async {query}</b> will return an async response.</p>
66
</header>
77
<nav>
88
<ulv-if='routes.length'>

‎example/main.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,35 @@ Vue.use(VueSmartRoute);
99
constrouter=newVueRouter({
1010
mode:'hash',
1111
routes:[
12+
{
13+
name:'autocomplete',
14+
path:'/autocomplete',
15+
component:()=>import('./View.vue'),
16+
smart:{
17+
matcher:{
18+
search:[/async\s(?<query>.*)/],
19+
asyncroutes({ query}){
20+
returnnewPromise(resolve=>{
21+
setTimeout(()=>{
22+
resolve([
23+
{
24+
name:'viewUser',
25+
params:{username:query},
26+
title:'Go to user *fkadev*'
27+
},
28+
{
29+
name:'sendMail',
30+
query:{email:'x@y.com',subject:'hello!'},
31+
title:'Send automail'
32+
},
33+
{name:'goToUser',params:{id:3},title:'Go To user 2'}
34+
]);
35+
},1000);
36+
});
37+
}
38+
}
39+
}
40+
},
1241
{
1342
name:'users',
1443
path:'/users',

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"devDependencies": {
4646
"@babel/core":"^7.1.6",
4747
"@babel/plugin-syntax-dynamic-import":"^7.0.0",
48+
"@babel/plugin-transform-runtime":"^7.2.0",
4849
"@babel/preset-env":"^7.1.6",
4950
"babel-loader":"^8.0.4",
5051
"cross-env":"^5.2.0",

‎src/vue-smart-route.js‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,15 @@ function splitMatch(path, query) {
2525
returnsplitted;
2626
}
2727

28-
functionfindSmartRoutes(value,context){
28+
functionbuildRoute(route,title,smart,next,context){
29+
return{
30+
...route,
31+
title:title.replace(/\*([^*]+)\*/g,'<mark>$1</mark>'),
32+
handler:()=>smart.handler(route,next,context)
33+
};
34+
}
35+
36+
asyncfunctionfindSmartRoutes(value,context){
2937
constroutes=context.$router.options.routes;
3038
constallRoutes=flattenRoutes(routes);
3139

@@ -35,7 +43,7 @@ function findSmartRoutes(value, context) {
3543
.map(({ name, path, smart})=>({ name, path, smart}));
3644

3745
// Find Matching Routes with thte Value
38-
constmatchingRoutes=smartRoutes.map(({ name, path, smart})=>{
46+
constmatchingRoutes=smartRoutes.map(async({ name, path, smart})=>{
3947
if(!smart.matcher){
4048
thrownewError('Smart routes must have matchers!');
4149
}
@@ -52,26 +60,31 @@ function findSmartRoutes(value, context) {
5260
.map(matcher=>value.toString().match(matcher))
5361
.filter(Boolean);
5462

55-
returnmatching
56-
.map(match=>{
63+
constroutes=awaitPromise.all(
64+
matching.map(asyncmatch=>{
5765
if(!match)return;
5866
constquery=match.groups ?match.groups :match;
5967
constroute={
6068
name,
6169
path,
6270
...splitMatch(path,match.groups)
6371
};
64-
return{
65-
title:smart.matcher
66-
.title(query,context)
67-
.replace(/\*([^*]+)\*/g,'<mark>$1</mark>'),
68-
...route,
69-
handler:()=>smart.handler(route,next,context)
70-
};
72+
73+
if(typeofsmart.matcher.routes==='function'){
74+
constroutesToBuild=awaitsmart.matcher.routes(query,context);
75+
returnroutesToBuild.map(r=>
76+
buildRoute(r,r.title,smart,next,context)
77+
);
78+
}
79+
80+
consttitle=smart.matcher.title(query,context);
81+
returnbuildRoute(route,title,smart,next,context);
7182
})
72-
.filter(Boolean);
83+
);
84+
return[].concat.apply([],routes).filter(Boolean);
7385
});
74-
return[].concat(...matchingRoutes);
86+
constdoneRoutes=awaitPromise.all(matchingRoutes);
87+
return[].concat(...doneRoutes);
7588
}
7689

7790
exportdefault{
@@ -84,8 +97,8 @@ export default {
8497
'An input with v-smart-routes directive must have v-model.'
8598
);
8699
}
87-
vnode.context.$watch(model[0].expression,function(value){
88-
this[binding.expression]=findSmartRoutes(value,this);
100+
vnode.context.$watch(model[0].expression,asyncfunction(value){
101+
this[binding.expression]=awaitfindSmartRoutes(value,this);
89102
});
90103
}
91104
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp