vue-router ：页面保持不变

Question

我想在移动到 localhost:8080/main

时显示 'Welcome.vue'

[main.js]

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import Vuelidate from 'vuelidate'

Vue.config.productionTip = false
Vue.use(Vuelidate)

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

[router/index.js]

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Welcome = () => {
  console.log("why") //This worked.
  return import(/* webpackChunkName: "welcome_page" */'@/components/Page/Welcome.vue')
}

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes : [
    {
      path : '/main',
      name : 'welcome_page',
      component : Welcome 
    },
  ]
});

[src/components/Page/Welcome.vue]

<template>
<div>
    <h1>Welome</h1>
</div>
</template>

<script>
    export default {
        name: 'welcome_page',
    };
</script>

'console.log ("why")'（在 router/index.js 中）在我移动到 localhost:8080/main 时工作，但浏览器仍然显示 App.vue[=13= 的页面]

Answer 1

我在 App.vue 中添加了 < router-view />。现在运行良好。

[App.vue]

<template>
<router-view/>
</template>

vue-router ：页面保持不变

vue-router : the page remains the same

vue.js

vue-router