Vue-router: Cannot get /...

[awitherow]

Regardless of what page I attempt to go to, if I try to go there directly and not through the home page, it gives me, for example:

Cannot GET /take-action

How can I navigate to these pages directly?

My router file looks like

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'hello',
      component: require('components/views/Hello')
    },
    {
      path: '/find-help',
      name: 'find-help',
      component: require('components/views/Find')
    },
    {
      path: '/take-action',
      name: 'take-action',
      component: require('components/views/Action')
    },
    {
      path: '/about',
      name: 'About',
      component: require('components/views/About')
    },
    {
      path: '*',
      name: '404',
      component: require('components/views/Hello')
    }
  ]
})

[awitherow]

Duh there is a section about it... closing.

[a21y]

For those wondering, this is the section: https://router.vuejs.org/en/essentials/history-mode.html

[kofimokome]

https://router.vuejs.org/en/essentials/history-mode.html does not solve the problem
I recentlyy deployed my vue js app to heroku and I have the same problem

[awitherow]

@kofimokome can you please post your router file?

[kofimokome]

`
import Vue from "vue"
import VueRouter from "vue-router"
import Index from "./components/index.vue"
import OfflineDemo from "./components/demo/offline.vue"
import OnlineDemo from "./components/demo/online.vue"
import Login from "./components/authentication/login.vue"
import Register from "./components/authentication/register.vue"
import Profile from "./components/user/profile.vue"
import Game from "./components/user/game.vue"
import Welcome from "./components/demo/notice.vue"

Vue.use(VueRouter)

const router = new VueRouter({
routes: [

{
  path: "/",
  component: Index,
  meta: {
    title: "Kofi: Tic Tac Toe",
    forVisitors: true
  }
},

{
  path: "/demo",
  component: Welcome,
  meta: {
    title: "Welcome",
    forVisitors: true
  }
},
{
  path: "/register",
  component: Register,
  meta: {
    title: "Register",
    forVisitors: true
  }
},
{
  path: "/login",
  component: Login,
  meta: {
    title: "Login",
    forVisitors: true
  }
},
{
  path: "/demo/offline",
  component: OfflineDemo,
  meta: {
    title: "Offline Demo",
    forVisitors:true
  }
},
{
  path: "/demo/online",
  component: OnlineDemo,
  meta: {
    title: "Online Demo",
    forVisitors:true
  }
},
{
  path: "/dashboard",
  component: Profile,
  meta: {
    title: "Dashboard",
    forAuth:true
  }
},
{
  path: "/game",
  component: Game,
  meta: {
    title: "Game",
    forAuth:true
  }
}

],
mode: "history"
})

export default router

`

[kofimokome]

All the code can't fit into the block. Thanks

[awitherow]

I can't help you too much @kofimokome as I am not really active with vue anymore... but check out my project, it is working:

https://github.com/openrefuge/openrefuge/blob/master/src/router/index.js
https://github.com/openrefuge/openrefuge/blob/master/src/main.js

Good luck and let me/us know if you've gotten it fixed 👍

[kofimokome]

Thanks @awitherow .
I noticed that my dist folder has just one file (build.js). I do not know if it is OK or normal because I took a look at yours and I saw other files inside?

[kofimokome]

I've seen the solution. I was using webpack simple. So, I switched to webpack and everything is working fine https://kofitictactoe.herokuapp.com ( still under development so the app is not user friendly)
Thanks for your help @awitherow

[awitherow]

Nice @kofimokome glad you figured it out! Sorry I couldn't be of more help m8. Good luck with your project! Would be cool to see it turn into a nice progressive web app 👍

https://github.com/vuejs-templates/pwa

[jezperp]

If anyone stumbles upon this problem, you can just add:
historyApiFallback: true
to your webpack.config file

read more:
https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback

[samayo]

@awitherow Can you be more civil about your 'help' next time?

[LinusBorg]

The comment you are referring to is more than a year old, more recent comments are fine, plus the author is not active anymore - so I think this is a bit unnecessary

[samayo]

The comment was made on Mar 15, 2017 so, it's not more than a year old by any calendar. Also, I just encountered this error and came to see a solution, but saw his comment go without being reprimand so I had to say something.

Its fine if you want to take sides, but my comment wasn't unnecessary

[alzmob]

How can I add historyApiFallback: true ?
I cannot find webpack.js file in my source code.

[posva]

Remember we have the forum and the Discord chat to ask quick questions!