导致页面刷新的模态组件

Question

I have a modal which only appears if the route is on a specific page named 'Item'. For some reason, if I click a different view, it reloads the page. Works perfectly fine on all the other routes except the one with a modal. When I remove the modal it works as it should. Am I missing something? Should the modal component not be in the layout?

Layout.vue:

<template>
    <div>
        <Modal v-if="this.$route.name === 'Item'" />
        <Navbar />
        <transition-group name="jumbo">
            <Jumbotron :key="1" v-if="this.$route.path === '/'" />
            <SecondaryJumbotron :key="2" v-if="this.$route.path !== '/'" />
        </transition-group>
        <transition appear name="page">
            <router-view></router-view>
        </transition>
        <SideItems
            v-if="this.$route.path !== '/' && this.$route.name !== 'Item'"
        />
        <Footer />
    </div>
</template>

<script>
import Navbar from "./components/Navbar";
//other imports...
import Modal from "./components/Modal";

export default {
    name: "app",

    components: {
        Modal,
        //other components
        SideItems
    }
};
</script>

Routes:

const routes = [
    {
        name: "Home",
        path: "/",
        component: index,
        meta: {
            title: "Home" + appName,
        }
    },
    {
        name: "Signup",
        path: "/signup",
        component: signup,
        meta: {
            title: "Signup" + appName,
        }
    },
    //other routes...
    {
        name: "Item",
        path: "/item/:id",
        component: item,
        meta: {
            title: "Item" + appName,
        }
    },
];

Modal.vue:

<template>
    <div class="modal" id="item-modal" @click="modalHide">
        <div class="modal-item-image" @click="modalHide">
            <img :src="getMainImage" @click="modalHide" />
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    computed: {
        ...mapGetters(["getMainImage"])
    },

    methods: {
        modalHide() {
            document.getElementById("item-modal").style.animation =
                "opacity-out 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards";
            document.getElementById("item-modal").style.pointerEvents = "none";
        }
    }
};
</script>

Answer 1

For some reason, having the component above the navbar in my layout was the cause. No idea why.

I moved it beneath the navbar and set the margin-top to -140px and this fixed the issue.