laravel-5 - Vue 组件中的 Laravel 注销路由

Question

在我的 Laravel 5.5 项目中，我有一个 Vue 组件作为带有 .vue 扩展名的单独文件。
在它的模板中有一个 vue-router 链接。另外，我需要在这里放置标准的 Laravel 注销链接。

<template>
    <div>
        <ul class="nav navbar-nav">
            <li><router-link to="/">Home</router-link></li>
            <!-- place where I want to add Laravel logout link -->
        </ul>
    </div>
</template>

我试图插入这样的 Laravel 注销链接:

<template>
  <div>
      <ul class="nav navbar-nav">
          <li><router-link to="/">Home</router-link></li>

          <li>
            <a href="{{ route('logout') }}" onclick="event.preventDefault();    
                     document.getElementById('logout-form').submit();">
                 Logout
            </a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                  {{ csrf_field() }}
            </form>
          </li>

        </ul>
    </div>
</template>

但是在这种情况下代码不会编译。我发现我不能在 Vue 组件中使用 Laravel 路由。在这种情况下我能做什么？

Answer 1

您可以定义一个方法来调用注销路由

你不能在 vue 组件中使用 laravel Blade 语法

<template>
  <div>
      <ul class="nav navbar-nav">
          <li><router-link to="/">Home</router-link></li>

          <li><a href="#" @click.prevent="logout">Logout</a></li>

        </ul>
    </div>
</template>
<script>
    export default {
        data: () => ({
             csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
             }),   
        methods:{
            logout:function(){
               axios.post('logout').then(response => {
                  if (response.status === 302 || 401) {
                    console.log('logout')
                  }
                  else {
                    // throw error and go to catch block
                  }
                }).catch(error => {

              });
            },
        },
    }
</script>

笔记:

我在这里使用 axios对于 http 请求，如果您对此一无所知，那么您也可以使用普通的 ajax 请求

对于 csrf token ，您应该在元标记中包含 csrf 数据。