使用 Vue Router 时 Laravel 路由不起作用

Posted 2023-02-22

【中文标题】使用 Vue Router 时 Laravel 路由不起作用

【英文标题】：Laravel routes not working when using Vue Router

【发布时间】：2020-03-25 09:22:37

【问题描述】：

我正在尝试调用 laravel 路由 Route::get('/logout', 'Auth\LoginController@logout');，它将注销用户并重定向到登录页面，但是当我尝试重定向到此 url 时它不起作用，任何事情都会发生，就像它正在调用vue路由路由，但是我的router.js中没有这个路由。

这是我对 vue 路由的路由配置：

Route::get('/vue_capture?', function () 
    return view('index');
)->where('vue_capture', '^(?!storage).*$');

这是我的router.js：

//import ...

Vue.use(Router)

export default new Router(
    mode: 'history',
    routes: [
        path: '/',
        component: Inicio
    , 
        path: '/viagens/cadastrar',
        component: Cadastrar
    , 
        path: '/viagens/listar',
        component: Listar
    ]
)

我的route.js 中没有/logout 路由，为什么它不调用我的laravel 路由？？

【问题讨论】：

我不明白...你在哪里调用laravel注销路由？

@porloscerrosΨ 在按钮链接中，但即使直接在 URL 中也不起作用

【参考方案1】：

你是如何在你的 vue 组件中生成链接的：router-link 或 href ？

如果要调用vue路由，使用router-link； 如果你想调用“普通”或 laravel 路由，请使用href；

让我知道它是否有效。

【参考方案2】：

尝试把你的 vue 路由 在此行之前：-

Auth::routes();

【讨论】：

你能在你的答案中添加为什么这会解决他们的问题吗？因为这应该在包罗万象的路线之前而不是在它之后

【参考方案3】：

首先，将 Laravel auth 路由添加到 routes 文件夹中的 web.php 文件中

Auth::routes();

然后在前端发送一个注销路由的请求

  axios.post('/logout').then(response => 
                location.reload();
            ).catch((error) => 
               console.log(error);
            );

【讨论】：

我可以像这样发布请求，但我正在尝试通过 URL 向 laravel 路由发出 get 请求。这种情况我该怎么办？

你在使用 Laravel Passport 吗？

不，我使用的是 laravel 的默认 Auth 适配器。

在你的路由文件中试试这个Route::get('logout', '\App\Http\Controllers\Auth\LoginController@logout');

【参考方案4】：

我在 myproject 中所做的。在 web.php 中有 Auth::routes()。它将通过在 AthenticatesUser.php 中调用 ougout 来处理它。请看一下这个 php 类。

<template>
<div class="container">
    <button class="btn" @click="logout">logout</button>
    <form id="logout-form" action="/logout" method="POST" style="display: 
none;">
                        <input type="hidden" name="_token" :value="token">
                    </form>
    <router-view></router-view>
</div>
</template>
 <script>
  export default 
  computed: 
        token() 
            let token = document.head.querySelector('meta[name="csrf-token"]');
            return token.content
        
    ,
    methods: 
        logout() 
            document.getElementById('logout-form').submit()