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.
Related
I have a project for which I use VueJS (2.x) for the frontend part.
I've made a component to do some filtering :
And I'd like to be able to change the URL according to the filters, so that I can share the URL and another user would land on the same search. At the stage of my screenshot, the URL should look like : my/long/url?username=test&email=#test. But I don't know how to achieve it.
Currently, when I add/remove a filter, I create a new URLSearchParams object that I commit to the vuex store and with a watch statement I query my backend again with the updated filters.
The thing is that my URL doesn't change, of course, because I do not pass by a this.$router.push(...) or whatever.
Maybe I started it wrong.
What is the good way of achieving this ? Knowing that routing to the same view with a new query part does trigger the error DuplicateNavigation...
Thanks in advance for your help :)
I had achieved something similar to this by using the history.pushState
This basically allows you to modify your URL even if you are not using $router.push
You can follow the URL for more details
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
I'm currently wondering about the difference between static and dynamic pages when using vue.js.
Are vue.js pages static or dynamic?
They can change on user interactions but not necessarily need to interact with the server to change data, when not using axios or alike. So does it still count as static just changing the frontend itself on input or interactions?
Little confused about this. Hope for good explanations.
A static page is a page delivered to the user exactly as stored and with no chance on being changed, end of story!
Although dynamic pages can take 2 types: Client-side dynamic web page and a Server-side dynamic web page.
Client-side dynamic page is changed without server requests. For example, when you click a button and something pops on the screen, or some content on the page changes, etc... (i think you take the idea).
Server-side dynamic page is changed with server requests, as you said for example, with HTTP requests using Axios.
And this is not the Vue.js definition, is the default definition for static and dynamic pages.
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 have my Pages model, views, and controller in the Admin namespace. However, I would like to display the pages at a root level. Instead of admin/pages/[:id], I would like the routes for showing pages to be /[:id]. Is it possible to do this without creating multiple controllers and models for Pages and while still keeping Pages in the admin namespace? If so, what is the best approach and how would you have to write your routes?
As far as I know, and as far as I've tried, I don't think theres a way to change the routes for showing pages to be /:id instead of admin/pages/[:id] without creating multiple controllers for Pages and while still keeping Pages in the admin namespace. Referring "without creating multiple controllers and models for Pages and while still keeping Pages in the admin namespace", I don't understand creating a new model. Creating a new controller will suffice.
For a non-nested resource, changing the route to a root route is relatively an easy task, i.e. say /:id instead of foo/:id
p.s. initially, I did not give your question a deep thought, and skipped the admin namespace part. But, trying this turned out to be fun. I'd really want to see someone post an answer to this (this is one answer where I'd love to be downvoted and pointed towards the correct answer).