I'm working on a Vue 3 app (using Quasar) with Vue Router. I want the user to be able to click on certain links (with paths beginning '/api/') which bypass the router completely and go straight to the backend API. But everything is getting picked up instead by the catch-all route (path: "/:catchAll(.*)*"). I tried adding a route without a matching component, path: "/api/*", but that doesn't work.
Is there a way for me to tell the router to ignore certain paths and let them be handled by the server?
Related
I'm using Vue Router with Vue 3 in a web application I'm working on, and have a 'catch all' route defined as the last route:
{
path: "/:catchAll(.*)*",
component: () => import("pages/Error404.vue")
},
This is picking up everything, though, including calls to the /api/ back end (although not via Ajax), and even things like '/test.csv', which is a link to a CSV file in the root directory.
How can I bypass the router for certain URLs, allowing them to be treated as regular requests?
Incidentally, I don't know whether this is relevant, but the application in question is a PWA built using Quasar. When I make the call to e.g '/test.csv', I see a request for 'service-worker.js' with a 304 response code in my nginx access log, confirming that the request is being handled by the router rather than nginx.
I do not know the difference between using Router replace and route redirect
and how to use them in my project I am new in vue.js
The Documentation should give you all information necessary.
But to answer your question:
router.replace() replaces the current entry in the history stack, while route.redirect() actually redirects to another path, having both in the history stack.
a redirect will be triggered before any navigation guard and trigger a new navigation to the desired path.
I'm trying to return data as JSON from the express server for a route. The data returns fine but when i open the NUXT page on the browser than the JSON data gets outputted instead of the page HTML.
Note the express route is the same as the page route. I know the routes are conflicting with each other. Do i need to have the server and front-end on different ports? Is there anything wrong i'm doing here?
Thanks
To avoid conflicts such as that you should use a prefix like /api/ or /api/v1/ something like that
In nuxt.config.js you need to define your server middleware
serverMiddleware: ["~/api/index.js"]
That file is your server. At the bottom you need to export it like this:
module.exports = {
path: "/api",
handler: app
}
Note here: app is your express app if you use express.js.
This here: const app = express();
If everything worked your root of your API should be available under host:port/api/
you cant do this if the routes for backend and frontend exactly same. this is route rules that they have to be unique and its not backend or frontend issue for e.x. you can have two routes with same url in express(api), nuxt too.
if we say the application for example is post office, the route are path to a house address (controller or action) so we can have two path to get the a house but its confusion have a same path(url or route) and different houses.
simple solutions:
as you said make the api and front separate with different ports or different domains or even have a prefix for your express routes
in express handle all of them, means return view or page with data needed instead of json data
$ tree .
.
├── main.go
└── static
└── output_of_npm_run_build
I used vue.js with vue router for the frontend and golang for backend. What I tried to accomplish:
use golang (either standard library or gorilla/mux) to take care of example.com/api/...
vue router to take care of all vue components (example.com, example.com/about, example.com/login, etc.)
RESTful APIs example.com/post/{post_id} for both frontend and backend
If I go to example.com and click the button about, vue router would display the about component and change the url to example.com/about without talking to the backend, which is expected. But if I enter example.com/about directly to the address bar and press enter, the request goes straight to the backend. Since the file about does not exist, it returns 404.
Is there a way to return static/index.html and somehow tells vue router to render xxx component even if example.com/xxx is sent directly by the browser to the server (with exception of example.com/api)?
Who should be responsible for routing example.com/post/{post_id}?
You need to update the hosting configuration. This issue used to be happened whenever I used Front-end JS frameworks such as React, Vue and so on.
So if you type example.com/about manually on address bar, the page would show '404 Not Found`.
I recommend this answer to solve your issue.
Vue router is not working with nginx
I have a single page (SPA) application written in Vue.
Now I need a separate page that should be available without being signed in.
To me it seems like a need to enable multi page app (MPA). I see in the documentation (https://cli.vuejs.org/config/#pages) that I need to set this up in vue.config.js. But I the documentation is unclear to me. Do I need to edit/rerun the Vue CLI setup? Or do some webpack changes. Just adding a new page entry with corresponding files does not work (webpack does not insert anything in html-file).
From SPA View, i would likely go like this
Inside /views folder
- HomePage.vue (no auth)
- Login.vue
- /users/ subfolder (auth needed)
- DashBoard.vue
- About.vue
etc
Then define the routes (paths,components,etc.) with requiresAuth as auth-check, redirects back to the route with HomePage.vuecomponent then.
and SPA mostly comes with MPA Challenges such as SEO, SSR concerns. The routing roughly the same to Vue/Nuxt.