using vue-router with Laravel Vue app, it shows 404 if I go base URL after login

Question

So I am using vue-auth with vue-router in Laravel 5.8 app. There is '/' landing page which is shown when I go to base URL i.e: if I have started the server on http://localhost:8000/ it shows the landing page but as soon as I Login and go to http://localhost:8000/ it shows a 404. How to fix it can anybody help? I am pretty new to Vue and Vue Router.

Below is the code snippet of router.js auth.js and app.js

router.js

// Pages

import Login from './components/Login'
import Landing from './components/Landing'
import Home from './components/pages/Home'
// Routes
const routes = [
    {
        path: '/',
        name: 'landing',
        component : Landing,
        meta:{
            auth: false,
            guest: true
        }
    },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      auth: false,
      guest: true
    }
  },
  // USER ROUTES

  // Home ROUTES
  {
    path: '/home',
    name: 'home',
    component: Home,
    meta: {
        auth: true
      }
  },
]
const router = new VueRouter({
  history: true,
  mode: 'history',
  routes,
})

export default router

auth.js

import bearer from '@websanova/vue-auth/drivers/auth/bearer'
import axios from '@websanova/vue-auth/drivers/http/axios.1.x'
import router from '@websanova/vue-auth/drivers/router/vue-router.2.x'
// Auth base configuration some of this options
// can be override in method calls
const config = {
  auth: bearer,
  http: axios,
  router: router,
  tokenDefaultName: 'jwtToken',
  tokenStore: ['localStorage'],
  rolesVar: 'role',
  registerData: {url: 'auth/register', method: 'POST', redirect: '/login'},
  loginData: {url: 'auth/login', method: 'POST', redirect: '', fetchUser: true},
  logoutData: {url: 'auth/logout', method: 'POST', redirect: '/', makeRequest: true},
  fetchData: {url: 'auth/user', method: 'GET', enabled: true},
  refreshData: {url: 'auth/refresh', method: 'GET', enabled: true, interval: 30}
}
export default config

app.js

import bearer from '@websanova/vue-auth/drivers/auth/bearer'
import axios from '@websanova/vue-auth/drivers/http/axios.1.x'
import router from '@websanova/vue-auth/drivers/router/vue-router.2.x'
// Auth base configuration some of this options
// can be override in method calls
const config = {
  auth: bearer,
  http: axios,
  router: router,
  tokenDefaultName: 'jwtToken',
  tokenStore: ['localStorage'],
  rolesVar: 'role',
  registerData: {url: 'auth/register', method: 'POST', redirect: '/login'},
  loginData: {url: 'auth/login', method: 'POST', redirect: '', fetchUser: true},
  logoutData: {url: 'auth/logout', method: 'POST', redirect: '/', makeRequest: true},
  fetchData: {url: 'auth/user', method: 'GET', enabled: true},
  refreshData: {url: 'auth/refresh', method: 'GET', enabled: true, interval: 30}
}
export default config

Thats it!!

try to remove mode: 'history',

Boussadjra Brahim
– Boussadjra Brahim

2019-08-27 08:32:40 +00:00
Commented Aug 27, 2019 at 8:32 — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 27, 2019 at 8:32
then will it save user token?

Sharad Mishra
– Sharad Mishra

2019-08-27 08:33:14 +00:00
Commented Aug 27, 2019 at 8:33 — Sharad Mishra
– Sharad Mishra, Commented Aug 27, 2019 at 8:33
It doesnt work rather it added '#' in the url

Sharad Mishra
– Sharad Mishra

2019-08-27 08:35:33 +00:00
Commented Aug 27, 2019 at 8:35 — Sharad Mishra
– Sharad Mishra, Commented Aug 27, 2019 at 8:35

Sharad Mishra · Accepted Answer · 2019-09-06 09:02:10Z

1

I added a 404 component and in router added {'*',component: NotFound} and on '/' added a check if auth redirect to '/home'

answered Sep 6, 2019 at 9:02

Sharad Mishra

1872 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md Ikramur Rashid · Accepted Answer · 2019-10-23 17:09:17Z

1

**Register your Laravel Route in your Vue Route like this to avoid 404 Error,**   

import users from './components/Users.vue';
import notFound from './components/NotFound.vue';

export default [
    { path: '/users', component: users },
    { path: '/home' }, // Laravel Route
    { path: '*', component: notFound },
]

edited Oct 23, 2019 at 17:09

answered Oct 22, 2019 at 16:35

Md Ikramur Rashid

112 bronze badges

Collectives™ on Stack Overflow

using vue-router with Laravel Vue app, it shows 404 if I go base URL after login

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related