Vue/Laravel - Mail URL mismatch leads to app root

Question

Vue-Laravel-based environment, Mail sent to user with URL leads to a specific path on application - not app root - , on click it indeed redirects to required path - browser URL bar detects required path not app root, on redirected page by checking:

router.isReady().then(() => {
  console.log('Router ready, current route:', router.currentRoute.value.fullPath);
  app.mount('#app');
});

It shows required path not http:localhost:5173. No navigation guards or path conversion included, Required route is set and referred to valid component. As required path redirected, app root component displayed.

rozsazoltan · Accepted Answer · 2025-11-24 18:37:26Z

0

isReady() should not be used to prevent the app from mounting, because mounting the app triggers the router to load (by app.use(router) plugin registration). Instead, you can use it to delay the loading of the root component, like this behavior:

App.vue

onBeforeMount(async () => {
  await router.isReady();

  // The user data is valid
  // ...
});

Reference:

https://github.com/vuejs/router/discussions/2118

answered Nov 24 at 18:37

rozsazoltan

18.5k8 gold badges50 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mahmoud Tarek Mahmoud Nov 24 at 18:48

It was implemented to check if required path is aborted and been redirected to http:localhost:5173, it seems it was redirected correctly from mail URL, the main issue here, however URL redirection goes as expected, app root is displayed.

rozsazoltan Nov 24 at 19:38

Consider implementing the minimal reproduction code necessary to trigger the issue; however, I believe the code snippet provided in the question is incorrect.

Mahmoud Tarek Mahmoud · Accepted Answer · 2025-11-26 11:57:52Z

After reviewing the issue, it seems the main problem isn't in mail URL redirection -trying more than one path(app-included and invalid paths)- , navigation routing pattern was missing RouterView or router-view to be included in src/App.view:

src/router/rotues.js

import { createRouter, createWebHistory } from 'vue-router';
import home from '../components/Home/home.vue';

const routes = [ 
     { path: '/home', name: 'home', component:home},
     { path: '/path', name: 'name', component:component}
];

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL), 
    routes
});
                     ........................

export default router;

src/main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/Routes'
createApp(App).use(router).mount('#app');
                      ...............................

src/App..vue

<template>
        <overallApplicationComponent></overallApplicationComponent>
        <RouterView>
            <component :is="componentswitch()"></component>
        </RouterView>
        <overallApplicationComponent></overallApplicationComponent>
                         .......................
</template>
<script setup>
import router from './router/Routes';
import home from './components/Home/home.vue';
function componentswitch(){
    if(router.currentRoute.value.path ==='/home') {
         return home;
     }else{
            return router.currentRoute.value.component;
        }
}
                   ........................
</script>

*vue Compositon API is the pattern followed

Collectives™ on Stack Overflow

Vue/Laravel - Mail URL mismatch leads to app root

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related