使用Vue -路由器与Laravel Vue应用程序，它显示404如果我去基础网址登录后

Question

所以我在Laravel5.8应用程序中使用vue-auth和vue-路由器。有'/‘登陆页面，当我进入基本URL时，即:如果我在http://localhost:8000/上启动了服务器，它就会显示登陆页面，但一旦登录并进入http://localhost:8000/，它就会显示404。谁能帮上忙呢？我对Vue和Vue路由器很陌生。

下面是router.js auth.js和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

就这样！！

Answer 1

我添加了一个404组件，在路由器中添加了{'*',component: NotFound}，在'/'上添加了一个检查，如果auth重定向到'/home'

Answer 2

**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 },
]