I am building an e-commerce front-end using Nuxt and I would like to have root level slugs for as many resources as possible. The most important ones are Catalog Paths and Product Urls. An obvious was is to use the Nuxt file structure for routing to create:
.com/category/men/tshirt
.com/category/women/tshirt
.com/product/name-of-product-slug
What I want to achieve is:
.com/men/tshirt
.com/name-of-product-slug
The logic would be to check if the patch matches any of known values (men, women) and load the Category Page component. If it doesn't, it will load the product component and finally a 404.
Is this possible? I've considered getting the Route Path and load a component or page on this or middleware.
Most of the time if you want to achieve a specific routing logic overriding the natural one of Nuxt, you would use the router-module of the nuxt-community.
Once using a classic router you would be able to create Regex to match your route since vue-router is using path-to-regex
You would be able to achieve something like
{ path: '/:gender(\(men|women))', name: 'category', component: Category }
Or any Regexp logic you want which should be enough in your case.
Related
What i want is to have the same behavior as wordpress but with nuxt.
In my page folder i have a structure like below:
index.vue
-tools
--_id.vue
--index.vue
-material
--_id.vue
--index.vue
My nuxt will generate respective route for these;
So we will take this url example mydomain.com/tools/1, in this page i have all content related to tools id 1 that stored in my database; i want to store in my database that this mydomain.com/tools/1, is associated to rewrited url mydomain.com/tools/my-first-tools; my-first-tools here i can update it at anytime but it will always related to mydomain.com/tools/1, so in the end when i land in mydomain.com/tools/my-first-tools, i want the same content as mydomain.com/tools/1 and with mydomain.com/tools/my-second-tools related to mydomain.com/tools/2
The content will dynamicly get by axios using id as parameter to get
Is there a way to make it with nuxt?
What you are describing is slugs. In your backend you will need to have a way to fetch either by slug or id but why not do just like Stackoverflow does it?
This website has a combination of the id and a slug for SEO purposes in its URL. Let's take a look at this URL:
https://taskotto.com/blog/14/how-to-achieve-customer-satisfaction-in-5-steps-in-the-hostel-industry
Do you see that SO has blog/{blogId}/{slug}?! You can do the same in your app:
mydomain.com/tools/1/my-first-tools
This way you don't need your backend to be able to retrieve either by slug or id. You will be able to retrieve by id only. You will have to re-order your nuxt folder to make sense:
tools
-- _index.vue
-- _todoId
--- _slug.vue
I wanted to know if there is a way to dynamically generate routes based on data from a database?
Currently, i am defining my routes in a routes file and then importing that into my vue project. Is there a way i can have specific configurations stored on a database such as the path, name, meta data and then when the application loads, depending on the auth level of the user, create routes for that user?
Reason why I'm asking to create and not use a pre-written route with params is because i want to give my users (at some point in the future) the ability to create their own pages from my system.
So just wanted to know from the community if there is a way to do this based on an axios call or something?
You can just use dynamic routing. To create new templates, code must be changed anyway.
I think technically you are still better off using a title parameter with a common prefix and just looking up that title. In theory it sounds nice to have a completely dynamic application where anyone can create any page... until someone decides to use "login" as the page name and override your own login component, making the app unusable.
That said, you can use router.addRoutes to dynamically add routes to your router. Create a router with the static routes (e.g. your homepage, your login page, your 404 page), then extend your router based on an api call.
Is there any way to specify custom paths for resources?
Example: <Resource name="User" path="/manageUsers" {...}>
If it's not possible "per resource", can we for example have all the CRUD pages be under a same basepath like: /crud/{/$resource.name} but keep the custom routes without that basepath.
Thank you very much.
EDIT #1
For context, we are building an admin panel that will have a lot of flows, basically step-by-step creation of resources. So I applaud the react-admin library for what it does (manage the CRUD part), but I want more flexibility in how the URLs are going to be.
I will need to have a section called /manageUsers/ that will have some data like a dashboard, and then the list could be /manageUsers/list/.
And then I may need another section called /customers/ that would list directly on that page.
EDIT #2
To give another use case, I'm trying to use graphQL as the dataProvider, and I had to rename all my resources since the rest API is using users where as the graphQL resource is User. So all my urls are now different!
I hope that makes it a bit more clear.
Is there any way to specify custom paths for resources?
No, this is not supported at the moment. One way to tackle this would be to use manageUsers as the resource name and translate it to User in your dataProvider.
I will need to have a section called /manageUsers/ that will have some data like a dashboard, and then the list could be /manageUsers/list/.
Definitely not supported by default either. However, you can replace the default Resource component with your own. It actually just creates routes for the resource inside a React Router switch. Note that you'll probably have to override the redirect prop of some components (such as Edit) because, when passed list, they expect the list to be at the resource root path.
I had to rename all my resources since the rest API is using users where as the graphQL resource is User
That's the dataProvider job to translate resources names into what your backend expect. Use resource names that make sense for your users (url wise).
I'm building an app and want multiple Vue instances in different pages of my website!
Is there a way to use History routing and "hash" routing within the same app so I can have URLs like this.
www.mysite.com/blog/seo-friendly-content
www.mysite.com/blog/google-can-see-this
www.mysite.com/#/something-cool/state-preserved
www.mysite.com/#/cool-but-not-indexed
One part of my application needs to serve SEO friendly content, and one section has a lot of dynamic content. I don't want to force the user to make another server request to load an entirely different page on the "SPA" part of the application!
I guess I could serve static HTML pages that I create manually, but I would like to if possible to use the Vue router to handle the routing!
I couldn't find anything in the Vue.js documentation about this. Anybody that has done something like this?
If you have multiple root Vue instances, then you cannot have a single router instance. At a fundamental level, your application needs route splitting at a server level. It means your client-server router cannot solve this problem alone.
What you essentially need is SSR.
With SSR, your first page (whichever the user visits first) will be pre-rendered by the server. Then anytime, a user navigates to another page, it won't be full page refresh. It will be handled by your client-side router.
It is the year 2018 and I strongly suggest that you use HTML5 routing and not hash based routing.
Also, consider using micro-frontends if your application is very big and has distinct role-based views.
I am new in Yii Framework. I am doing one small correction in Yii framework web app. Their third party Fax(Fax.de) API providers change something, I am trying to change the code, but I couldn't get the right file.
If the URL is www.example.com/paymentoption. What controller will work and where can I get Route folder?
Please help me...
in yii there is no route folder or file.
From Url you can simply find the controller named paymentoption. and in that you can find the method actionIndex which is called by Default
From documentation:
Routing involves two steps:
the incoming request is parsed into a route and the associated query
parameters; a controller action corresponding to the parsed route is
created to handle the request. When using the default URL format,
parsing a request into a route is as simple as getting the value of a
GET query parameter named r.
When using the pretty URL format, the URL manager will examine the
registered URL rules to find matching one that can resolve the request
into a route. If such a rule cannot be found, a
yii\web\NotFoundHttpException exception will be thrown.
Once the request is parsed into a route, it is time to create the
controller action identified by the route. The route is broken down
into multiple parts by the slashes in it. For example, site/index will
be broken into site and index. Each part is an ID which may refer to a
module, a controller or an action.
In this case, the link: www.example.com/paymentoption will use the controller PaymentoptionController and actionIndex, or it could be a module.
I recommend reading the documentation on the part of the Routing and Url manager: https://www.yiiframework.com/doc/guide/2.0/en/runtime-routing
Yii is a conventional based framework. That is, You should follow certain naming conventions to create your component.
For example. Your controller should be
SomenameController
Notice, above controller name has naming convention Controller adjoined to Somename
Here, You don't have folder to router, but controllers
//Get controller name
echo Yii::$app->controller->id
You can find a controller with that name in your controllers folder.