vue.js - 为什么我的 Vue-router 没有路由到我的页面？

Question

我得到了我的 Vue.js 应用程序，我已经通过 npm i vue-router 安装了 vue-router，
我的主页 App.vue 上有一个路由器链接，我想重定向到我的 Inscription.vue。
当我点击路由器链接时，我确实继续 http://localhost:8080/inscription，但 View 没有改变，我仍然在我的主页上，
我不明白为什么？ (我没有错误)
我的 main.js

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

Vue.config.productionTip = false;

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

Vue.use(router);

我的路由器/index.js :

import Vue from 'vue'
import Router from 'vue-router'
import App from '../App.vue'
import Inscription from '../Inscription.vue'

Vue.use(Router)

const routes = [
  {
      path: '/',
      name: 'Home',
      component: App
  },
  {
      path: '/inscription',
      name: 'Inscription',
      component: Inscription
  }
]

const router = new Router({
  mode: 'history',
  routes: routes
});

export default router;

我的 App.vue 简化了

<template>
  <div class="acceuil_main">
    <div class="navbar_element">
      <router-link :to="{name: 'Inscription'}">Inscription</router-link>
    </div>
  </div>
</template>

<script>

export default {
  name: "App",
  data () {
    return {
      beers: null,
      connected: false,
      user: null
    }
  }
};
</script>

我的 Inscription.vue 简化

<template>
  <div class="acceuil_main">
    <a class="navbar_element">
      Inscription
    </a>
  </div>
</template>

<script>

export default {
  name: "Inscription",
  data () {
    return {
      title: "Inscription",
      connected: false,
      user: null
    }
  }
};
</script>

a picture of my folder architecture

Answer 1

要让路由器实际工作，您需要一个 <router-view>应用程序中某处的组件。最好的地方可能是App零件。查看docs<router-view>用作占位符 - 当路由处于事件状态时，路由器会将为路由配置的组件放在那里。
从这个意义上说，您的 /路线可能不应该使用 App组件但其他东西 - 创建另一个组件，例如 Home将显示在根路由上 (/)

const App = Vue.component('App', {
  name: "App",
  template: `
  <div class="acceuil_main">
    <div class="navbar_element">
      <router-link :to="{name: 'Inscription'}">Inscription</router-link>
    </div>
    <router-view></router-view>
  </div>
  `
})

const Inscription = Vue.component('Inscription', {
  template: `
  <div>Inscription</div>`
})

const routes = [{
  path: '/inscription',
  name: 'Inscription',
  component: Inscription
}]

const router = new VueRouter({
  mode: 'history',
  routes: routes
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>