Issues arise when integrating Laravel routes with Vue Router

Question

Issues arise when integrating Laravel routes with Vue Router

When attempting to invoke a Laravel route

Route::get('/logout', 'Auth\LoginController@logout');

to log out the user and redirect to the login page, I encounter an issue. It seems like when trying to redirect to this URL, nothing happens; almost as if it is calling a Vue router route that does not exist in my router.js.

My current route configuration for Vue routes is as follows:

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

Additionally, this is how my router.js looks:

//import ...

Vue.use(Router)

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

As there is no /logout route specified in my route.js, I am confused as to why the Laravel route is not being called properly.

javascript laravel vue.js vue-router

Answer 1

Answer №1

Do you create your links within your vue component using router-link or href?

To navigate to a vue route, use router-link;
If you want to call a regular or laravel route, use href;

Please inform me if this solution works for you.

Answer 2

Do you create your links within your vue component using router-link or href?

To navigate to a vue route, use router-link;
If you want to call a regular or laravel route, use href;

Please inform me if this solution works for you.

Answer 3

Answer №2

Make sure to add your vue routes above the following code:-

Auth::routes();

Answer 4

Make sure to add your vue routes above the following code:-

Auth::routes();

Answer 5

Answer №3

To begin, include the Laravel authentication routes in the web.php file located inside the routes folder

Auth::routes();

Next, on the front end, make a request to the logout route using axios

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

Answer 6

To begin, include the Laravel authentication routes in the web.php file located inside the routes folder

Auth::routes();

Next, on the front end, make a request to the logout route using axios

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

Answer 7

Answer №4

During the course of my project, I executed certain steps. One of them involved utilizing Auth::routes() in the web.php file to manage authentication by calling the logout method in AthenticatesUser.php. Please take a moment to review this PHP class.

<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()
        }
    }
}

Answer 8

During the course of my project, I executed certain steps. One of them involved utilizing Auth::routes() in the web.php file to manage authentication by calling the logout method in AthenticatesUser.php. Please take a moment to review this PHP class.

<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()
        }
    }
}

Issues arise when integrating Laravel routes with Vue Router

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Hiding timestamps on an interactive transcript: A step-by-step guide

Endlessly triggering document.execCommand, the JavaScript selectionchange-EventListener seems to have a mind of

Insert a div element into the JavaScript file

The functionality of Angular's ng-change or ng-click for select elements is not functioning properly

Exploring the process of gathering information using Node.js' http.request

Ensuring that form submissions originate from a specific URL requirement in Laravel and iframe integration

What is the best way to add multiple rows using a parameter in SQL?

Struggling to navigate to another page using Vue Router?

Issue with Angular 6 subscribe event not being caught by subject?

Combining two collections in MongoDB and calculating the total number of documents

What could be causing the request body in ExpressJs to be blank?

Having trouble getting CSS and Bootstrap to work in Laravel 5.8. Any suggestions on how to resolve this issue?

Determine the minimum and maximum width of jQuery UI resizable during the "resizestart" event

What is the best way to ensure the submenu is visible on every menu when the cursor hovers over it

Testing URL Parameters in JEST with an API

Failure to trigger the callback for mongoose.connection.once('open') event

Bring in multiple classes from node_modules

The subsequent promise does not fire after the initial promise

What is the best way to save static information (such as country codes) within a Vue.js application?

What is the best way to extract the modal into its own file?