How can I fix vue router direct links?

Question

I have a vuejs SPA hosted on Azure that works fine on production when starting on the homepage. However, I can't go directly to links or even refresh pages. They take me directly to a 404 error page.

I know it has to do with my router, but I'm at a loss after messing with it. Is it something quick that needs to be changed or is there more to it than that? Below is my router index.

I thought the "history" mode at the bottom would solve it, but that wasn't the case.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/resources',
    name: 'Resources',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "resources" */ '../views/Resources.vue')
  },
  {
    path: '/FAQs',
    name: 'FAQs',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "faqs" */ '../views/FAQs.vue')
  },
  {
    path: '/training',
    name: 'Training',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "training" */ '../views/Training.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations — Michal Levý, Jun 25 '21 at 17:03
@MichalLevý I've been on this, but nothing I've tried using it has really helped me. — M. Straw, Jun 25 '21 at 17:36

score 2 · Accepted Answer · answered Jun 25 '21 at 20:08

This is the relevant portion of what Michal shared:

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

Source: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

All this is to say that Vue Router won't be able to handle a user using the /training URI to get to the training page and will need to navigate there from the home page each time.

You might need to do what this user did: https://stackoverflow.com/a/67168081/7176046

and add this after your closing ], for your "routes":

"navigationFallback": {
  "rewrite": "/index.html",
  "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
}

How can I fix vue router direct links?

1 Answers1