Due to the limit of a shared hosting. My Vue application has to rely on query parameters to match to different components.
I want this url:
http://www.example.com/index.html?pg=app
matches App component
and
http://www.example.com/index.html?pg=login
matches Login component
How can I make it?
Related
I am developing VUE PWA (with VUE-CLI) and I need to fetch different data depending on provided params. Let me explain what I need, I have http://localhost:8080/proconnect/ (I changed publicPath: '/proconnect/' in my vue.config.js and it works fine, but I need to grab different data from API depending on param. I try to use simple GET params like this http://localhost:8080/proconnect/?code=123, this works fine in a browser, but when I install PWA on my computer as an app it loads without GET param.
I use PHP for the backend. The app works fine when it built on the server.
I need to pass param somehow to my app to fetch different data. I don't mind to use different subdomains or another way to solve this issue. I will appreciate any suggestions.
Thanks!
If you are using vue-router, a simple way to get the params is by using the useRoute hook. https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup
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.
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.
generate tried to prerender the entire site (including dynamic routes if they are specified). I'm wondering if it is possible to have some sort of hook (say when a user's profile changes) that would re-prerender just that one page.
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.