In Vuejs, wie man eine Komponente außerhalb der Standard-Router-Ansicht rendern

Ich habe eine Vue App, wo die Seiten mit Vue-Router navigiert werden.In Vuejs, wie man eine Komponente außerhalb der Standard-Router-Ansicht rendern

Mein app.vue ist einfach:

<template> 
    <div id="app"> 
    <main-header/> 
    <router-view/> 
    </div> 
</template> 

<script>...</script> 
<style>...</style>

Die Seiten werden gerendert vue-Router:

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'Home', 
     component: Home 
    }, { 
     path: '/page1', 
     name: 'Page1', 
     component: Page1 
    }, { 
     path: '/page2', 
     name: 'Page2', 
     component: Page2 
    } 
    ] 
})

Die Urls für App ist jetzt

localhost:8080/#/  -> Home 
localhost:8080/#/page1 -> Page1 
localhost:8080/#/page2 -> Page2

Problem: Ich möchte eine andere Seitemachenwird nicht von Vue-Router verwendet und wird wie folgt aufgerufen: oder localhost:8080/login und nach erfolgreicher Authentifizierung wird wie oben beschrieben auf das Standard-URL-Routing zurückgegriffen. Wenn man zum Beispiel localhost:8080/login geht, gibt es keine App.vue gerendert, ist das möglich?

Wie mache ich das?

Quelle

2017-11-24 wrahim

Was ist der Anwendungsfall, den Sie hier zu lösen versuchen? – Saurabh

Ich habe eine App, die Vue-Router verwendet, ich möchte eine Login-Seite für die App ('login.vue'), die nicht von der Vue-Router verwendet wird und eine URL ohne' # 'hat – wrahim

Ich bin mir nicht sicher, ob dies ist, was Sie erreichen wollen, aber das ist, wie ich es Router für Login-Seite unter Verwendung tat unter Verwendung v-if auf meine Abschnitte Komponenten in der Hauptkomponente Vorlage wie folgt aus:

<template> 
    <body class="my-theme"> 
     <div class="wrapper"> 
      <app-header v-if="authenticated"></app-header> 
      <main-sidebar v-if="authenticated"></main-sidebar> 
      <router-view></router-view> 
      <app-footer v-if="authenticated"></app-footer> 
     </div> 
    </body> 
</template> 

<script> 

    import AppHeader from './components/sections/AppHeader' 
    import AppFooter from './components/sections/AppFooter' 
    import MainSidebar from './components/sections/MainSidebar' 

export default { 
    name: 'app', 
    props: { 
     authenticated: { 
     type: Boolean, 
     required: true 
     } 
    }, 
    components: { 
    AppHeader, 
    AppFooter, 
    MainSidebar 
    } 
} 
</script>

Quelle

2017-11-25 13:07:46 NimaAJ

In Vuejs, wie man eine Komponente außerhalb der Standard-Router-Ansicht rendern

Antwort

Verwandte Themen