Vue 2: vue-router-3.x not redirecting/pushing from App.vue

Question

I made a Vue 2 web page and tried to use vue-router v3 to route to a different page. The web page is as follows:

src/App.vue: the web page opens from here

<template>
  <div id="app">
    <GoHere/>
  </div>
</template>

<script>
import GoHere from './views/gohere/GoHere.vue'

export default {
  name: 'App',
  components: {
    GoHere
  }
}
</script>

src/main.js:

import Vue from 'vue'
import App from './App.vue'
import router from "./router/router"

Vue.config.productionTip = false

new Vue({ 
  router,
  render: h => h(App),
}).$mount('#app')

src/views/gohere/GoHere.vue: the page from which the issue arises

<template>
  <div>
    <v-btn @click="goHere()">
      Go Here
    </v-btn>
  </div>
</template>

<script>
export default {
    name: "GoHere",
    methods: {
        goHere() {
            this.$router.push("/menu")
        }
    }
}
</script>

src/views/menu/Menu.vue: the page to redirect to

<template>
  <div>
    Menu
  </div>
</template>

<script>
export default {
    name: "Menu",
}
</script>

src/router/router.js: the router file

import Vue from 'vue'
import VueRouter from 'vue-router'
import GoHere from '../views/gohere/GoHere'
import Menu from '../views/menu/Menu'

Vue.use(VueRouter)

const routes = [
    { path: '/', name: "gohere", component: GoHere},
    { path: '/menu', name: "menu", component: Menu}
]

const router = new VueRouter({
    routes
})

export default router

When I clicked on the button in GoHere.vue, the URL changes into "http://localhost:8080/#/menu" but the content does not change into the content for Menu.vue. How can the problem be solved?

Answer 1

The component from the current route will automatically render in <router-view></router-view>

App.vue:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Check the docs