VueJS Routen mit Komponententag nicht

arbeitet Jedes Mal, wenn ich den Komponenten-Tag verwende, die eine ID von #app in meiner Komponente in der Vorlage hat/App.vue es gibt die folgenden Fehler:VueJS Routen mit Komponententag nicht

// components/App.vue 
<template> 
    <div id="app"> 
    <img class="logo" src="./assets/logo.png"> 
    <hello></hello> 
    <a v-link="{ path: '/home' }">Go to Foo</a> 
    <a v-link="{ path: '/about' }">Go to Bar</a> 
    <p> 
     Welcome to your Vue.js app! 
    </p> 
    <router-view></router-view> 
    </div> 
</template>

Fehler

Wenn dies jedoch ohne die Komponente und nur ein reguläres Element mit der Komponenten-ID funktioniert, funktioniert es normal.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>VueJS Starter</title> 
    </head> 
    <body> 
    <div id="app"></div> 
    </body> 
</html>

Gibt es sowieso Router mit Web-Komponenten zu verwenden? Weil es in Chrome auch nicht mit vue-devtools funktioniert, wenn man es mit einer Element-ID verwenden muss.

Quelle

2016-04-25 Miura-shi

Ich glaube, Sie möglicherweise so etwas wie Backbone oder Ractive verwendet sind, wo die JS die Vorlage analysiert und fügt dann den gerenderten Inhalt in ein Platzhalter. Im obersten VueJS verwenden Sie eine Element-ID, um die gesamte Anwendung zu mounten. Aber jede ROUTED-Komponente darin ist an der richtigen Stelle in der Router-View-Hierarchie eingefügt. Sie scheinen zu versuchen, Ihre App innerhalb einer Vorlage von etwas anderes zu mounten (oder vielleicht Vue selbst, ich bin mir nicht sicher), aber so ist es nicht getan. Schlage einen weiteren Durchlauf in der Dokumentation vor. http://vuejs.org/guide/index.html –

Dieses Problem hat damit zu tun, wie Sie Ihre Anwendung eingerichtet haben. Wir müssen Ihre Haupt-js-Datei sehen, um zu sehen, wie Sie die Komponenten bootstrappten. – Smalbil

Stellen Sie sicher, dass Sie die Informationen in Ihrer Datei main.js angeben.

Es sollten Sie richtig importieren und den Router verwenden, wie folgt aus:

import VueRouter from 'vue-router'; 
... 
Vue.use(VueRouter);

Quelle

2017-01-09 14:12:09

VueJS Routen mit Komponententag nicht

Antwort

Verwandte Themen