Wie wird der Vue-Router nur in der untergeordneten Komponente verwendet?

Question

Ich bin neu in Vuejs und habe einige Fragen bei der Verwendung. ich eine Stammansicht, mit 2 Kind Komponente darin erstellen, sieht die rootview.vue-Datei wie folgt:

<template> 
    <div id="rootView"> 
    <calendar-top-view></calendar-top-view> 
    <calendar-bottom-view></calendar-bottom-view> 
    </div> 
</template> 

<script> 
    import calendarTopView from './calendarTopView.vue' 
    import calendarBottomView from './calendarBottomView.vue' 
    export default { 
    components: { 
    'calendar-top-view': calendarTopView, 
    'calendar-bottom-view': calendarBottomView 
    } 
} 
</script> 

und in Kalender-bottom-View-Komponente, ich brauche Schalter zu helfen vue-Router verwenden, um zwischen zu untergeordneten Komponenten: calendarView und agendaView. Also entscheide ich vue-Router nur in meinem Kalender-bottom-vue Komponente hinzuzufügen, und der Code sieht aus wie folgt:

<template> 
    <div id='mainRightDiv'> 
    <div id='calendarToolboxDiv'> 
     <a v-link='{ path: "/calenarView"}'></a> 
     <a v-link='{ path: "/agendaView"}'></a> 
    </div> 
    <router-view></router-view> 
    </div> 
</template> 

<script type="text/javascript"> 
    import Vue from 'vue' 
    import calendarView from './calendarView.vue' 
    import agendaView from './agendaView.vue' 
    import VueRouter from 'vue-router' 
    Vue.use(VueRouter) 
    let App = Vue.extend({}) 
    let router = new VueRouter() 
    router.map({ 
    '/calendarView': { 
     component: calendarView 
    }, 
    '/agendaView': { 
     component: agendaView 
    } 
    }) 
    export default { 
    ready: function() { 
     router.go({ path: '/calendarView'}) 
    } 
    } 
</script> 

Was ich beabsichtige zu tun, um den Router lassen Calendar zuerst machen, wenn die Komponente initialisiert. Aber wenn ich diese Seite starte, bekomme ich eine Fehlermeldung wie

'router-view> kann nur innerhalb einer Router-fähigen App verwendet werden.'

Ich überprüfte die offizielle Spezifikation von Vue-Router und fand in seinem Demo-Code, vue-Router wurde in Eintrag js der Demo-App verwendet, keine Verwendung in irgendeiner untergeordneten Komponente gefunden.

Also frage ich mich, wie kann ich Vue-Router in einer meiner Kind-Komponente anstelle von root verwenden?

Answer 1

Ich habe mit Vue.js seit über +3 Monaten gearbeitet, aber noch nie eine Anleitung oder Dokumentation gesehen, wo es verwendet . Ich schreibe so, als ob du ES6 nicht benutzt. Sie sollten auch sagen, welche Modulbündler Sie (WebPack, Browserify) zusammen mit Gulp verwenden, da es so aussieht, als würden Sie versuchen, Vueify zu verwenden. Ohne eines von ihnen können Sie keine .vue Dateien lesen.

Angenommen, Sie Browserify mit Vueify verwenden, erstellen Sie .js Datei, welche Struktur haben sollte:

var Vue = require('vue'); 
var Router = require('vue-router'); 
Vue.use(Router); 
Vue.config.debug = true; 
//any other npm packages 

import Alert from './components/Alert.vue'; 
import SubVue1 from './pages/Subvue1.vue'; 
import SubVue2 from './pages/Subvue2.vue'; 
import Bar from './pages/Bar.vue'; 
import Baz from './pages/Baz.vue'; 

var App = Vue.extend({ 
    data: function() { 
     return { 
      //any ViewModel data 
     } 
    }, 
    components: {Alert} 
}); 

var router = new Router(); 
router.map({ 
    // Not found handler 
    '*': { 
     component: { 
      template: '<div class="text-align:center">' + 
      '<h1>Not Found</h1>' + 
      '</div>' 
     } 
    }, 
    '/sub1': { 
     name: 'subvue1', 
     component: SubVue1 
    }, 
    '/sub2': { 
     name: 'subvue2', 
     component: SubVue2 
     // add a subRoutes map under /foo 
     subRoutes: { 
      '/bar': { 
       // Bar will be rendered inside Foo's <router-view> 
       // when /foo/bar is matched 
       component: Bar 
      }, 
      '/baz': { 
       // Same for Baz, but only when /foo/baz is matched 
       component: Baz 
      } 
     } 
    } 
}); 

router.start(App, 'body'); // #app,.start -as you wish 

Bitte beachte, dass ich vue-Router im Stamm Eltern .js file.So im Grunde, wenn Sie /sub1 eingeben, dann wird Subvue1.vue geladen. Alle .vue Dateien müssen jedoch in einer .js Datei über Gulp gebündelt werden. Achten Sie auf Unterrouten (CalendarView und AgendaView Switch). Jeder SubVue, Bar, sollte Baz Struktur haben:

<template> 
    <router-view><router-view> //For Subvue2 subroute 
</template> 
<script> 
    export default { 
     props: ['parentProperty'], 
     data: function() {// data} 
     methods:{} 
    } 
<style></style> 

I npm verwenden herunterladen Vue, Vue-Router, etc. Aber Sie können sie aus dem Projekt Ressourcen importieren. Ich habe nicht die Absicht, schlau zu sein, ich versuche zu helfen, basierend auf Annahmen aus Ihrem Code. Lesen Sie Vue Router Dokumente für weitere Informationen.