2017-05-05 5 views
0

マイmain.jsvue.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は変わりますが、登録コンポーネントは表示されません。

+1

はあなたのapp.vueの内容に応じて、あなたはコンポーネントとしてそれをロードし、新しいVueのことができます({ エル: '#app'、 ルータ、 テンプレート: '' は コンポーネント:{アプリケーション} }) – Deepak

+0

は、コード –

+0

@Deepakでコメントを投稿するあなたの質問isnteadをeidt:あなたのソリューションは、私のために働きました。ありがとうございました。 – LJP

答えて

0

あなたapp.vueの内容によっては、コンポーネントとして、それをロードすることができ、その後、

new Vue({ el: '#app', 
      router, 
      template: '<App/>', 
      components: { App } 
     }) 
関連する問題