vue.js Routing zeigt die gleiche Komponente nach der ersten Navigation

Question

Mein main.js ist als

import Vue from 'vue' 
import App from './App' 
import vueResource from 'vue-resource' 
import VueRouter from 'vue-router' 

import Registration from './components/Registration.vue' 
import Login from './components/Login.vue' 



Vue.config.productionTip = false 
Vue.use(vueResource) 
Vue.use(VueRouter) 


const router = new VueRouter({ 
    mode: 'history', 
    base: __dirname, 
    routes: [ 
     { path: '/', component: Registration }, 
     { path: '/login', component: Login }, 
     { path: '*', redirect: '/' } 
    ] 
}) 

new Vue({ 
    el: '#app', 
    router: router, 
    template: '<router-view></router-view>' 
}) 

app.vue

<template> 
    <div id="app"> 
     <router-link to="/">Registration</router-link> 
     <router-link to="/login">Login</router-link> 
     <router-view></router-view> 
    </div> 
</template> 

folgt Er lädt die app.vue mit Registrierung Link und Anmeldung Link . Registrierungskomponente wird standardmäßig geladen. Wenn ich auf den Login-Link klicke, wird die Login-Komponente angezeigt. Wenn ich erneut auf die Registrierung klicke, ändert sich die URL, aber die Registrierungskomponente wird nicht angezeigt.

Answer 1

Je nach Inhalt Ihrer app.vue können Sie es als eine Komponente laden, und dann

new Vue({ el: '#app', 
      router, 
      template: '<App/>', 
      components: { App } 
     })