Vue.js routing zu Seiten, die nicht arbeiten

Ich versuche zu lernen vue.js und ich habe ein problem mit routing arbeiten.
Ich möchte die Verwendung von Vorlagen, die innerhalb anderer html-Dateien, so dass keine inline-Vorlagen.

Was passiert ist, das routing ist nie fixiert an meiner Seite und ich erhalte keine Fehlermeldung.
Ich habe keine Ahnung, wie diese Arbeit zu machen, können Sie helfen?

Dies 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 nicht einfügen, mein home.html und about.html weil Sie einfach einen Absatz ohne alles.

Wie kann ich diese Arbeit machen? Und was ist extrem wichtig ich nicht verwenden können, importiert wird, ist alles andere node/babel und Zeug, das ist eine statische Seite.

Sind die Seiten, die Sie verlinken, eigentlich vue Vorlagen oder sind Sie nur in der Notwendigkeit der router?

InformationsquelleAutor user3212350 | 2016-11-11

  1. 0

    Soweit ich weiß, kann man nicht Referenz, HTML-Dateien, die in der route-Konfiguration der router nicht laden Sie diese Dateien für Sie. Stattdessen müssen Sie eine Komponente für jede route, die können bringen Sie Ihre eigene Vorlage (haben Sie einen Blick auf die vue-router-Dokumentation):

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

    Wenn Sie nicht möchten, um die HTML-templates direkt in den JS-code, können Sie Sie wie folgt:

    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' }
}];

    InformationsquelleAutor Aletheios

Schreibe einen Kommentar