Can vue-router use regex route matching and pass the match as a named parameter - vue-router

Under the hood, I understand the vue-router uses path-to-regexp to handle route matching.
If I use the route format:
/app/:collection(/^cases$?)/:id
This matches the route /app/cases/abc123 and directs to the component just fine but doesn't store { collection: 'cases' } on the $route.params object which is what I also need. Is there another way to do this?

My bad, I misunderstood the syntax of path-to-regexp in the docs.
The route matching should have been:
/app/:collection(cases)/:id
.. then you get the route matching with the parameter passed.
I'm unclear if its appropriate to answer the question as correction or delete it. I'm sure someone will let me know ;)

Related

How to construct an ASP.NET Core MVC route with prefix that might contain the same character as the rest of the url?

I want to construct a route that matches the following urls:
/r-cars
/r-old-cars
/r-very-old-cars
Everything behind the prefix 'r-' should be passed to an Action as a parameter. I constructed the following route template:
routes.MapRoute(
...
template: "r-{urlPart}"
...
)
This route does exactly what is intended and 'cars', 'old-cars' and 'very-old-cars' are extracted and passed as an argument to my Action method.
However, if I have the following url:
/r-older-cars
This route does not match and the Action is not triggered. I guess this is because the 'r-' is occuring twice in the url - but I don't really understand why this is a problem and how I could write a route that
just defines the 'r-' as a prefix that should occur at the very beginning of the url and simply pass everything behind that as one string to my Action.
(I'm using AspNetCore.App 2.2.0)
Can anybody give advice on that?
Thank you very much!
I guess I found a solution:
In startup.cs:
routes.MapRoute(
...
"{urlPart:regex(^r-.+$)}"
...
)
By this way the Action gets triggered for all urls starting with '/r-' (also the url '/r-older-cars' gets matched).
Since the 'r-' is now part of the Action parameter I put the following code at the beginning of my Action method:
urlPart = urlPart.Substring(2);
Now urlPart contains 'cars', 'old-cars', etc. and everything else works fine.

Nuxt encode/decode URI with double colon

My URLs have double colon on them.
I push a path to Nuxt router which has : as a part of it.
export default {
router: {
extendRoutes (routes, resolve) {
routes.push({
name: 'custom',
path: 'towns' + '(:[0-9].*)?/',
component: resolve(__dirname, 'pages/404.vue')
})
}
}
}
When I point to http://localhost:3000/towns:3 , for example, the : is translated as %3Aon the URL leading to this error message:
Expected "1" to match ":[0-9].*", but received "%3A2"
How to revert this to : ?
I tried encodeURI(), decodeURI(), encodeURIComponent() and decodeURIComponent() in vain.
A demo for the ones who wants to try: nuxt-extend-routes
Any suggestions are welcome
Vuex is using vue-router and vue-router is using path-to-regexp to parse router path configuration
It seems to me, that you are trying to use Unnamed Parameters which doesn't make sense because vue-router/vuex need the name of the parameter to pass it down to Vue component behind the route
Why don't just use named parameters ?
{
path: '/towns:id(:\\d+)',
name: 'Page 3',
component: Page3
}
Sure, result will be that $route.params.id value will be prefixed with : and all router-link params must be :XX instead of 'XX' but that's something you can deal with. vue-router (path-to-regexp) is using : to "mark" named path parameters ...there's no way around it
You can take a look at this sandbox. Its not Nuxt but I'm pretty sure it will work in Nuxt same way....
Update
Well it really doesn't work in Nuxt. It seems Nuxt is for some reason applying encodeURIComponent() on matched path segments and throws an error. It works when server-side rendering tho (it throws some error on client still)...
Firstly, I concur with Michal LevĂ˝'s answer that there's a library bug here. The line throwing the error is here in the Nuxt source:
https://github.com/nuxt/nuxt.js/blob/112d836e6ebbf1bd0fbde3d7c006d4d88577aadf/packages/vue-app/template/utils.js#L523
You'll notice that a few lines up the segment is encoded, leading to : switching to %3A.
However, this line appears to have originated from path-to-regexp:
https://github.com/pillarjs/path-to-regexp/blob/v1.7.0/index.js#L212
It isn't trivial to fix this bug because the encoding is not simply 'wrong'. There's a lot of stuff going on here and by the time that line is reached the parameter values have been URL decoded from their original values. In the case of our unencoded : that causes problems but in other cases, such as matching %3A, the encoding would be required.
The handling of encoding within path-to-regexp is a delicate topic and we aren't helped by the old version being used. This also makes it more difficult to come up with a suitable workaround in your application.
So, let's see what we can do...
To start with, let's consider the path:
path: 'towns' + '(:[0-9].*)?/',
Bit odd to concatenate the strings like that, so I'm going to combine them:
path: 'towns(:[0-9].*)?/',
The / on the end isn't hurting but it seems to be unnecessary noise for the purposes of this question so I'm going to drop it.
On the flip side, not having a / at the start can cause major problems so I'm going to add one in.
The .* is suspicious too. Do you really mean match anything? e.g. The current route will match towns:3abcd. Is that really what you want? My suspicion is that you want to match just digits. e.g. towns:3214. For that I've used [0-9]+.
That leaves us with this:
path: '/towns(:[0-9]+)?',
Now, the : problem.
In general, route paths are used in both directions: to match/parse the URL and to build the URL. Your use of an unnamed parameter makes me wonder whether you only intend to use this route for matching purposes.
One option might be this:
path: '/towns:([0-9]+)',
By moving the : outside the parameter it dodges the encoding problem.
There are two problems with the code above:
The colon/number suffix is no longer optional on the URL. i.e. It won't match the path /towns as the original route did. This can be solved by registering /towns as a separate route. I'm not aware of any other way to solve this problem with the available version of path-to-regexp.
You won't be able to use it to build URLs, e.g. with nuxt-link.
If you need to be able to use it to build URLs too then you could use a named parameter instead:
path: '/towns::town([0-9]+)',
The :: part here is potentially confusing. The first : is treated literally whereas the second : is used as a prefix for the town parameter. You might then use that with nuxt-link like this:
<NuxtLink :to="{ name: 'custom', params: { town: 4 } }">
...
</NuxtLink>

vue-router: how to check if current route is a route or one of its subroutes?

I'm wrapping router-link to add some features.
I need to check if current route is a route or a subdolder of a route.
Something like the following
I know it cannot works, because :active need a boolean, but javascript String.match returns an array;: it's to explain my goal
:active="$route.name.match('customer_users*')"
In my router.js I definied that /customer/{customer_id}/users is named customer_users and that /customer/{customer_id}/users/{user_id} is named customer_users_edit.
So i'd like to be able to set ":active" in my wrapper for both these routes.
Use the $route.matched property to see if the current route is your customer_users or any of its children.
For example, using Array.prototype.some()
:active="$route.matched.some(({ name }) => name === 'customer_users')"
See https://v3.router.vuejs.org/api/#route-object-properties
$route.matched
type: Array<RouteRecord>
An Array containing route records for all nested path segments of the current route.

Recursive/Exploded uri variable with restlet

Does Restlet support exploded path variable (reference to URI Template RFC)?
An example would be /documents{/path*} where path can be for example "a/b/c/d/e".
This syntax doesn't seem to work with Restlet.
I'm creating a folder navigation api and I can have variable path depth, but I'm trying to have only one resource on the server side to handle all the calls. Is this something I can do with Restlet? I suppose I could create a custom router but if there is another way to do this I would like to know.
Thanks
It is possible to support this using matching modes.
For example:
myRouter.attach("/documents{path}",
MyResource.class).setMatchingMode(Template.START_WITH);
Hope this helps!
I'm doing the following
myRouter.attach("/documents/{path}", MyResource.class).setMatchingMode(Template.START_WITH);
Now I do get inside the resource GET method, but if I request the value of the path variable, I only get the first part (for example, /documents/a/b/c, path returns "a".) I use getRequest().getAttributes().get("path") to retrieve the value. Am I doing something wrong ?
Mathieu

How do I get only the query string in a Rails route?

I am using a route like this
match "/v1/:method" => "v1#index"
My intention here is capture the name of the api method and then send the request to that method inside the controller.
def index
self.send params[:method], params
end
I figured this would send the other parameters as an argument to the method, but it didn't work. So my question is how can I pass the non-method parameters in a query string?
#query_parameters does exactly what you want:
request.query_parameters
It's also the most efficient solution since it doesn't construct a new hash, like the other ones do.
Stolen from the work of a colleague. I find this a slightly more robust solution, since it will work even if there are changes to the path parameters:
params.except(*request.path_parameters.keys)
I sort of solved this problem by doing this:
params.except("method","action","controller")