vue.js路由在第一次导航后显示相同的组件

Question

我的main.js如下

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>

它加载带有注册链接和登录链接的app.vue。默认情况下会加载注册组件。当我单击登录链接时，登录组件正在显示。当我再次单击注册时，url会更改，但注册组件不会显示。

Answer 1

根据app.vue的内容，您可以将其作为组件加载，然后

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