使用带有 Laravel Vue 应用程序的 vue-router，如果我在登录后转到基本 URL，它会显示 404

Posted 2023-02-22

【中文标题】使用带有 Laravel Vue 应用程序的 vue-router，如果我在登录后转到基本 URL，它会显示 404

【英文标题】：using vue-router with Laravel Vue app, it shows 404 if I go base URL after login

【发布时间】：2019-12-31 09:18:01

【问题描述】：

所以我在 Laravel 5.8 应用程序中使用 vue-auth 和 vue-router。 当我转到基本 URL 时，会显示“/”登录页面，即：如果我在 http://localhost:8000/ 上启动了服务器，它会显示登录页面，但是一旦我登录并转到 http://localhost:8000/，它就会显示 404。如何解决它有人可以帮忙吗？我对 Vue 和 Vue Router 还很陌生。

下面是router.js auth.js和app.js的代码sn-p

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

就是这样！！

【问题讨论】：

尝试删除mode: 'history',

那么它会保存用户令牌吗？

它不起作用，而是在 url 中添加了 '#'

【参考方案1】：

我添加了一个 404 组件并在路由器中添加了'*',component: NotFound 并在'/' 上添加了一个检查身份验证是否重定向到'/home'

【参考方案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 ,
]