Laravel / Sanctum / VueJS / Loading directly a route generates an error

Best Answer

Level 39

Levels of routes redirection

dns / proxy (cloudlare for instance)
web server config (virtualhost, .htacess)
laravel router
vue router

error saying that it's an unknown route

=> 3) or 4)

Standard 3) is 404 page

=> probably 4)

1 like

Level 63

@sr57 I have said that the route is not found because the message error is Error - Not found.

It works fine when I navigate from the links in the navigation bar. I have this error only if I try to refresh the page in the browser on another route than the base route.

I specify that back and front are on the same domain, but on different subdomains.

So I also think about vue router.

What can I do ?

Level 39

Inpect / share your vue router files

1 like

Level 63

@sr57 Here it is.

import { createRouter, createWebHistory } from 'vue-router'
import store from '../store'

// import all components
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
...

const routes = [

  // all the routes are defined like this

  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      requiresAuth: true
    }
  },

  {
    path: '/login',
    name: 'login',
    component: Login
  },

  // and I redirect to home page if the route isn't found

  {
    path: '/:pathMatch(.*)*',
    name: 'notfound',
    component: Home
  }

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Level 39

Don't understand your /login path is defined.

Have you try to clear your browser cache (Ctrl+F5)?

1 like

Level 63

@sr57 Yes I already tried this several times. Clearing the cache doesn't solve the problem.

Level 63

@sr57 Locally I don't have this problem, it only occurs on production on the web hosting.

1 like

Level 39

OK, so it's point 2) of my first answer.

Is it a vps or a shared hosting or ... ?

1 like

Level 39

Sorry, I should have written it can be point 2 ...

To try to better understand, have a "not found page" different for each levels to see which "router" causes the problem.

That said .htaccess is part of point 2 (web server config) and is not linked to frontend or backend.

I don't like/work with shared hosting because all have their specific configs ...

1 like

https://medium.com/@mariatndagire/deploying-a-vuejs-application-in-shared-hosting-551065d062e1

Level 63

@sr57 It's a shared hosting. I really thought it was a vue router problem.

Ok so the problem comes from the shared hosting.

Now I'm really lost.

I don't have any .htaccess file for the VueJS front end. But I have one for the Laravel backend.

I have followed this tutorial (perhaps not exactly this one, but it contains exactly the same advice).

Thanks to your help, I have searched around vue router and shared hosting. I have found this. It's perhaps the solution.

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

I will try it tomorrow, not today because it's very late here ;).

I say you if it works as soon as I have tested.

If it doesn't work, I will search around the your last advice (not found page).

1 like