New pages not working going to direct URL

Question

I have a web app I've been working on for a long time and am now just starting to add new pages to it.

I created an import and route to it in Vue Router and when you use a router-link link, it will load up the page fine. But going to the URL directly only brings up the nav bar. It's as if the page doesn't exist unless you go to it through router-link.

All other pages in my app work fine by going directly to the URL.

When the project is uploaded to Firebase hosting, I get a 404 error going directly to the URL, but again, a link to the page from a router-link works fine.

What gives?

Code sample below. The issue is with Page2.

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/Page1'
import Page2 from '@/components/Page2'
import Index from '@/components/Index'
import ViewProfile from '@/components/ViewProfile'

import firebase from 'firebase'

Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
    {path: '/', name: 'Index', component: Index},
    {path: '/page1', name: 'Page1', component: Page1},
    {path: '/page2', name: 'Page2', component: Page2},
    {path: '/:slug', name:'ViewProfile', component: ViewProfile},

  ]
})

export default router

when you go to that page do you have errors in your console browser? — Boussadjra Brahim, Oct 30 '18 at 22:57
This is a common problem with SPA, check out this link https://stackoverflow.com/questions/36399319/vue-router-return-404-when-revisit-to-the-url — Shawn, Oct 30 '18 at 23:03

New pages not working going to direct URL

0 Answers0