I have nuxt app. I want to create path like this:
path: '/dworzec-pkp/:slug/:category?/:date?',
So there would be two optional params. Example urls would be:
localhost:5555/dworzec-pkp/nowa-iwiczna <-- w/o optional params
localhost:5555/dworzec-pkp/nowa-iwiczna/12-10-2020 <-- optional param: date
localhost:5555/dworzec-pkp/nowa-iwiczna/departures <-- optional param: category
localhost:5555/dworzec-pkp/nowa-iwiczna/departures/12-10-2020 <-- optional params: date & category
How do I know if url contain category or date? Should I create just directories dworzec-pkp/_slug and within it _.vue file, and then programmatically decide whether it is date or category? Or maybe there's some better solution for that?
Currently I tried like this:
and my issue is that when i enter this localhost:5555/dworzec-pkp/nowa-iwiczna/12-10-2020 then it is treated as :category?. Also I would need to basically almost copy-paste entire _date.vue and index.vue there as this pages are almost same.
Related
I have a router in Vue looking like this:
{
path: '/temporaryList/:tempUrl',
name: 'temporaryList',
component: () => import('../views/TemporaryListView.vue')
}
I want to send a value for the "tempUrl"-param that could for example look like this:
https%3A%2F%2Fwww.amazon.se%2F%5Bn%5Btest%5B~%5B
(this value is coming from encodeURIComponent() function, so it should be able to be used in the URL)
This does not seem to work for some reason, When I try to access this page I get:
"There was no web page at the URL: http://localhost:3000/temporaryList/https%3A%2F%2Fwww.amazon.se%2F%5Bn%5Btest%5B~%5B "
I have built this exact same solution with node and express where this didn't seem to be an issue. I don't know if the value of the param I send is to long for Vue? It also seems like Vue does not like when a params includes a "%" for example.
Is there any way you can make Vue routers allow this type of param-value?
Vite uses the decodeURIComponent function on the request URL. The value of the param i sent had "%" included in it which made Vite read every "%" as a "/". That made Vite searchfor a location that did not exist.
This npm-package solved my issue: https://github.com/ivesia/vite-plugin-rewrite-all
As you know, in order to have dynamic route in Nuxt.js, we should use Underline (_) before the dynamic name. For example the name of the file should be:
_id.vue
The problem is that I want to write something like article-name instead of id. However, the name of folder which should be:
_article-name.vue
leads to error and breaks the projext. How can I fix it?
Nuxt does not support dynamic route names with dashes.
The dynamic route name (i.e., article-name here) is passed to path-to-regexp (via Vue Router), which requires named parameters to consist of word characters (alphanumeric characters and the underscore).
A potential workaround is to use underscore instead of dash:
_article_name.vue
demo
What is the difference between these linkings?:
Some Page
and
Some Page .
I've worked with the first one, and can't understand why we need to write like title='title' in the second one.
For the second you are passing 'title' as a string literal to the url parameter title, so this will work if your path looks like:
path('entry/<slug:title>/', some_view, name='entry')
for example. If the path looks like:
path('entry/<slug:slug>/', some_view, name='entry')
the name of the parameter is thus slug, not title. Regardless if you want to pass the value of the title variable, you should use:
Some Page
or in case the URL parameter is slug:
Some Page
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.
I've been asked to change the routes on a Rails project such that the routes will only respond to requests where the app name (or other arbitrary string) is the first string after the domain name, e.g.
www.thething.com/appname/users/sign_in instead of www.thething.com/users/sign_in
www.thething.com/appname instead of www.thething.com
www.thething.com/appname/search instead of www.thething.com/search
I've suggested using a subdomain appname.thething.com instead, but the client is quite specific about wanting the URL in the above format.
www.thething.com will be a splash page which will contain a link to www.thething.com/appname, with the intention of adding additional apps/pages in future with new folder names.
Is there an easy way of modifying the routes file so that all routes will get the .../appname prepended to all resources and routes, while being after the domain?
One option is wrap all existing routes in: namespace :appname do ... end, like so:
# config/routes.rb
Appname::Application.routes.draw do
namespace :appname do
# existing routes go here
end
end
I'm not sure if this is the most elegant solution, but it will prepend /appname to all the routes.