I get 404 page after on page reload

[oussama-he]

I deployed an app on Heroku. The app was created using this template.
I have a problem with the app, the problem is: when I navigate to a route like this /catg-1 and after I refresh I get a 404 page.
Note that I use history mode in vue-router.
These are the URL in my Django project:

backend/urls.py

urlpatterns = [

    # http://localhost:8000/
    path('', index_view, name='index'),

    # http://localhost:8000/api/admin/
    path('admin/', admin.site.urls),

    path('api/bookmarks/', include('backend.bookmarks.urls')),

]

backend/bookmars/urls.py

urlpatterns = [
    path('category/', CategoryListAPIView.as_view()),
    path('category/<slug:slug>/', CategoryAPIDetail.as_view(),),
    path('category/<slug:slug>/bookmarks/', BookmarkByCategoryAPIList.as_view()),
    path('bookmark/', BookmarkAPICreate.as_view()),
    path('bookmark/<slug:slug>/', BookmarkAPIDetail.as_view()),
    path('get-page-title/<path:url>', get_page_title_view),
    path('check-url-existence/<path:url>', check_url_existing_view,),
]

And this is the vue.config.js file:

const IS_PRODUCTION = process.env.NODE_ENV === 'production'

module.exports = {
    outputDir: 'dist',
    assetsDir: 'static',
    publicPath: IS_PRODUCTION
    ? 'http://vue-django-bookmark.herokuapp.com/'
    : '/',
    // For Production, replace set baseUrl to CDN
    // And set the CDN origin to `yourdomain.com/static`
    // Whitenoise will serve once to CDN which will then cache
    // and distribute
    devServer: {
      proxy: {
        '/api*': {
          // Forward frontend dev server request for /api to django dev server
          target: 'http://localhost:8888/',
        }
      }
    }
  }

routes from router.js:

export default new Router({
  routes: [
    {
      path: "/",
      component: Home,
      name: 'Home',
    },
    {
      path: "/:category",
      component: Bookmarks,
      name: "Bookmarks",
    },
  ],
  mode: "history",
})

Any help, please?

Thank you in advance.

[gtalarico]

Template is not configured to use history mode. You would need either disable history mode or create the proper redirect urls on Django