Vue-router: Is there a way to exclude routes from vue router and send them as a GET http request?

[scottgrayson]

For example:
I want these to use vue router

'/'
'/news'
'/blog'

but theses to be sent as get requests and ignored by vue router

'/admin'
'admin/users'

[fnlctrl]

No. Front-end routing never sends GET requests.

[motanelu]

I think what he means is can the router ignore some routes and let them pass through to the server? Which is something I'm interested in achieving now.

[posva]

Use a regular link 🙂

[motanelu]

That's one way of doing it, although in my case is a bit more complicated, as it would need to fallback to a different HTML5 router. Think an widget that you can drop in. Routes that start with /my-widget/* should be handled by the vue router and others should be allowed to pass.

[dschreij]

I'm also struggling with this one. I want all calls to /api/* to be forwarded to the server, but let vue-router catch all other unspecified paths and show a 404. Currently I don't see a way to specify in the route config to let vue-router ignore calls to /api. What would be nice to have is:

~javascript
const routes = [
{ path: '/', component: Home },
/* other routes /
{ path: '/api', // Ignore or pass on to server },
{ path: '', component: NotFound }
];
~

The problem now is that other apps who want to peform a GET request to the api endpoints of the server get intercepted by the vue-router.

[posva]

Just use a regular link without declaring it in routes (or axios/fetch if you just want to fetch data)

[dschreij]

@posva thanks for your suggestion, but doesn't the { path: '*', component: NotFound } entry intercept it anyway if I don't declare it in the routes?

[posva]

only if you use a router-link

[koliyo]

What if you enter the URL manually in the browser address bar? Eg https://my.service/graphiql

Edit: I realize I can just catch this on the server side before routing to the SPA client.

[mirajp]

What version of vue-router are you all using? I'm using v3.0.1 and I can just add the paths I want ignored without designating a component and vue-router will allow me to visit my backend RESTful (GET) endpoints to see the JSON as axios would; the router is not redirecting to my catch-all/default route:
(Vue: v2.5.16)

const routes = [
    { path: '/', component: Home },
    /* other routes with components*/
    { path: '/apia' },
    { path: '/apib' },
    { path: '/apic' },
    { path: '*', redirect: '/' }
];

...

var router = new VueRouter({
    routes: routes,
    mode: "history"
});

Maybe this is no longer an issue?

[tecnical]

Hi guys,

I installed vuepress as mentioned in the docs (https://vuepress.vuejs.org/guide/getting-started.html#inside-an-existing-project). I used the same directory anyway.

I want to integrate the build of vuepress in the build of my project (im using quasar, with vue-router, but could be anything with vue-router)

Is there anyway to vou-router ignore the /docs?

if put the dist content in /src/statics/docs, vou-router sends me a 404 response.

[tcamde]

I had the problem that my GET requests to my node servers API were intercepted by vue router.
As it turns out the solution is just to create your api routes before serving the SPA on you node backend. I know it's obvious but it took me 30 min. So letting everybody else know.

This works for me (server.js):

const express = require('express')
const history = require('connect-history-api-fallback')
const bodyParser = require('body-parser')
const config = require('./server/config/config.js')
const sequelize = require('./server/models/database-connection')

const app = express()

// attach all server routes
require('./server/routes')(app)  <------------------------------- before app.use(history())

app.use(history()) // routes all unkown get requests back to index
app.use(express.static(__dirname + '/client/dist')) // serves the SPA
app.use(bodyParser.json()) // makes payload of post request available under req.body

[joaomelo]

I was having a challenge related to this issue.

I want some routes to be caught by vue-router and others to be addressed by Node. But I want the vue-router eligible routes to be addressed in all situations, including when the user typed them in the address bar. That is, not be limited to cases coming from a router-link as explained by @posva.

If someone reached this page researching the same problem as me, I'm sharing that the solution was found in the official docs. The html5 history mode page, although addressing a different problem, offers an equally valid solution to this.

By the way, Vue and Vue-router are awesome :)