Vue 2：vue-router-3.x 不是 redirecting/pushing 来自 App.vue

Question

我制作了一个Vue 2 网页并尝试使用vue-router v3 路由到不同的页面。网页如下：

src/App.vue: 网页从这里打开

<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: 出现问题的页面

<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: 要重定向到的页面

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

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

src/router/router.js: 路由文件

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

当我点击GoHere.vue中的按钮时，URL变成了“http://localhost:8080/#/menu”但是内容没有变成[的内容=24=]。如何解决问题？

Answer 1

当前路由的组件将在<router-view></router-view>

中自动渲染

App.vue:

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

Check the docs

Vue 2：vue-router-3.x 不是 redirecting/pushing 来自 App.vue

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

vue.js

vue-router

vuejs2