Vue.js Routing zu Seiten funktioniert nicht

Ich versuche, vue.js zu lernen, und ich habe ein Problem mit Routing-Arbeit. Ich möchte Vorlagen verwenden, die sich in anderen HTML-Dateien befinden, also keine Inline-Vorlagen.Vue.js Routing zu Seiten funktioniert nicht

Was passiert ist, ist Routing nie an meine Seite angeheftet und ich erhalte keinen Fehler. Ich habe keine Ahnung, wie das funktioniert, können Sie mir helfen?

Das ist mein index.html

<!DOCTYPE html> 
<html xmlns:v-bind="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <script src="assets/js/vue.js"></script> 
    <script src="assets/js/vue-router.js"></script> 
    <script src="js/routes.js"></script> 
</head> 
<body> 
<div id="app"> 
    <router-link to="/home">Go to home</router-link> 
    <router-link to="/about">Go to about</router-link> 
    <router-view></router-view> 
</div> 
<script src="js/app.js"></script> 
</body> 
</html>

Dies ist routes.js

var routes = [ 
{ 
    path: '/home', 
    template: 'pages/home.html' 
}, 
{ 
    path: '/about', 
    template: 'pages/about.html' 
} 
];

und das ist mein app.js

const router = new VueRouter({ 
    routes // short for routes: routes 
}); 

const app = new Vue({ 
    el: '#app', 
    router: router 
});

Ich werde nicht meine home.html werden einfügen und über. html, weil sie nur ein Absatz ohne etwas sind.

Wie kann ich das schaffen? Und was ist extrem wichtig Ich kann nicht importieren, erfordert, irgendetwas node/babel und so, das ist eine statische Seite.

Quelle

2016-11-11 user3212350

Sind die Seiten, die Sie tatsächlich vue Vorlagen verknüpft sind, oder sind Sie nur in der Notwendigkeit des Routers? – retrograde

Soweit ich weiß, können Sie in der Routenkonfiguration keine HTML-Dateien referenzieren, der Router lädt diese Dateien nicht für Sie. Stattdessen müssen Sie für jede Strecke eine Komponente spezifizieren, die seine eigene Vorlage bringen kann (haben einen Blick auf die vue-router documentation):

var routes = [{ 
    path: '/home', 
    component: { template: '<div>home</div>' } 
}, { 
    path: '/about', 
    component: { template: '<div>about</div>' } 
}];

Wenn Sie nicht die HTML-Templates direkt in Ihr JS-Code setzen wollen, Sie können sie wie folgt enthalten:

index.html:

<script type="x-template" id="home"> 
    <div>home</div> 
</script> 
<script type="x-template" id="about"> 
    <div>about</div> 
</script> 
<script src="js/app.js"></script>

routes.js:

var routes = [{ 
    path: '/home', 
    component: { template: '#home' } 
}, { 
    path: '/about', 
    component: { template: '#about' } 
}];

Quelle

2016-11-11 23:44:10 Aletheios

Es gibt zwei Probleme mit Ihrem Code

Sie falsche Syntax verwendet - müssen Sie Template-Tag innerhalb Komponente in der Routen Config
Sie können nicht enthalten HTML-Dateien in der Art und Weise Sie es taten wickeln . Vue.js lädt sie nicht automatisch.

Check out this:

const routes = [ 
 
{ 
 
    path: '/home', 
 
    component: { 
 
     template: "<div>home</div>" 
 
    } 
 
}, 
 
{ 
 
    path: '/about', 
 
    component: { 
 
     template: "<div>about</div>" 
 
    } 
 
} 
 
]; 
 

 
const router = new VueRouter({routes}); 
 

 
const app = new Vue({ 
 
    el: '#app', 
 
    router: router 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script> 
 

 
<div id="app"> 
 
    <router-link to="/home">Go to home</router-link> 
 
    <router-link to="/about">Go to about</router-link> 
 
    <router-view></router-view> 
 
</div>

Quelle

2016-11-11 23:54:38 damienix

Vue.js Routing zu Seiten funktioniert nicht

Antwort

Verwandte Themen