My vue.js nav will not navigate to other pages, just reloads the same page-CodePudding

new to Vue js so hopefully it is simply something I have missed.

I have a navbar component, which generates a list of nav items like below:

<template>
    <div >
        <nav>
            <span >D & E</span>
            <ul>
                <li v-for="item in items" :key="item.id">
                    <a :href="item.href">{{ item.text }}</a>
                </li>
            </ul>
        </nav>
    </div>
</template>
  
<script>
import "./navbar.scss";

export default {
    name: 'NavBar',
    components: {
    },
    props: {
    },
    data() {
        return {
            items: [
                {
                    id: 1,
                    href: "/homepage",
                    text: "Home"
                },
                {
                    id: 2,
                    href: "/about",
                    text: "The Wedding"
                },
                {
                    id: 3,
                    href: "/story",
                    text: "Our story"
                },
                {
                    id: 4,
                    href: "/travel",
                    text: "Travel & Stay"
                },
                {
                    id: 5,
                    href: "/response",
                    text: "RSVP"
                }
            ]
        };
    },
    methods: {

    },
}
</script>

however, when i am clicking each link, this just looks like it reloads the homepage, so I can never actually see a new page (which is obviously not what I want).

Have I missed anything glaringly obvious with this?

To add, I have not got vue router installed in the project, not sure how this can be done or if it is even needed?

CodePudding user response：

VueJS is an SPA, so you're not using traditional a tags to move from page to page (as you do in Wordpress realm for example, which is MPA).
Maybe give a read to that one for more details.

If you want to move from page to page, you need to use Vue router as you guessed.
You need to define the routes in a /router/index.js file with something like this

import Vue from "vue";
import VueRouter from "vue-router";
import CustomersName from "../views/CustomersName.vue";
import HomeView from "../views/HomeView.vue";
import AboutView from "../views/AboutView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "index",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    component: AboutView,
  },
  {
    path: "/customers/:name",
    name: "customers-name",
    component: CustomersName,
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

And use router-link to move to that given page

<router-link to="/about">about page</router-link>

I've just updated one of my github repo with a working configuration.
Clone the project locally and inspect how it works if you want more details.