CODEWITHSUNDEEP
webpackvue.jsroutesvue-router
David Thompson
David Thompson

Reputation: 53

Dynamic routes in Vue-Router work in Development but not Deployment

I've built a small single-page app in Vue using Vue-Cli and Vue-Router, and am using dynamic route matching as mentioned here[1]. Everything works fine during local development, but for some reason the dynamic pages/routes won't load after build (resulting in a 404 error). Other routes (the root page of my project, for example) work fine after build. I'm thinking this may be a webpack config issue.

Example:

Root URLS work:

Dynamic URL works locally but not hosted:

Routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Controller from '@/components/Controller'
import Default from '@/components/Default'

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    base: '/arbq/panel',
    routes: [
        {
            path: '/:id',
            name: 'controller',
            component: Controller
        },
        {
            path: '/',
            component: Default
        }
    ]
 })

From Webpack > Config > Index.js

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/arbq/panel/',

...

Please let me know if you see anything that might be preventing the route from being mapped appropriately, and thanks!

http [1]: https://router.vuejs.org/en/essentials/dynamic-matching.html

Upvotes: 2

Views: 2393

Answers (3)

Amit Mondal
Amit Mondal

Reputation: 359

There are 2 ways to fix this issue:

  1. Configuring the vue-router history mode hash mode as mentioned in other answers, but this has a bad impact on the SEO of the webpage.
  2. Configuring the server with rewrites/redirects.

Upvotes: 0

Ancode
Ancode

Reputation: 101

As of today - January 2024 , the link provided in the answer doesn't work, so in case someone enters and want to know a way to fix this issue if they cannot use the hash mode,can be found in

https://router.vuejs.org/guide/essentials/history-mode

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 https://example.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!

Upvotes: 0

Juan Piza Ferra
Juan Piza Ferra

Reputation: 120

You should check the vue-router history mode as it's explained on the page, you should check out HTML5 vue-router's page, you will need to configure your server or maybe change the mode of the vue-router to hash and this will work because this simulates the history mode by not refreshing the URL, i know it should be a comment but i can't post sorry. Hope this help you!

Upvotes: 1

Related Questions