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。注册组件默认加载。当我单击登录链接时，将显示登录组件。当我再次点击注册时，网址发生了变化，但没有显示注册组件。

Answer 1

根据你的 app.vue 的内容，你可以将它作为一个组件加载，然后

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