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