Unable Vuejs2 und Vue-Router zu arbeiten, ohne auf Client

Ich schließe vuejs und vue Router in meiner Seite, und erstellt eine app.js initialisieren den Router und vue, aber das Routing funktioniert nicht, ich nicht einmal siehe die Links definierten innen als <router-link to="/foo"> foo </router-link>Unable Vuejs2 und Vue-Router zu arbeiten, ohne auf Client

dies ist eine vereinfachte Version von Code

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="../build/js/vue.min.js"></script> 
    <script src="../build/js/vue-router.min.js"></script> 
    <script src="../build/js/app.js"></script> 
</head> 
<body id="app"> 

<div class='nav'> 
    <router-link to="/foo">foo</router-link> 
    <router-link to="/bar">bar</router-link> 
    <router-link to="/tar">tar</router-link> 
</div> 


<div class="content"> 
     <router-view></router-view> 
</div> 

</body> 
</html>

Meine app.js ist nur copy/paste von dieser vue-Router Seite oder diese example:

// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter and then call `Vue.use(VueRouter)`. 

// 1. Define route components. 
// These can be imported from other files 
const Foo = { template: '<div>foo</div>' } 
const Bar = { template: '<div>bar</div>' } 

// 2. Define some routes 
// Each route should map to a component. The "component" can 
// either be an actual component constructor created via 
// `Vue.extend()`, or just a component options object. 
// We'll talk about nested routes later. 
const routes = [ 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar } 
] 

// 3. Create the router instance and pass the `routes` option 
// You can pass in additional options here, but let's 
// keep it simple for now. 
const router = new VueRouter({ 
    routes // short for `routes: routes` 
}) 

// 4. Create and mount the root instance. 
// Make sure to inject the router with the router option to make the 
// whole app router-aware. 
const app = new Vue({ 
    router: router 
}).$mount('#app')

aus irgendeinem Grund kann ich die Links überhaupt nicht sehen. Ich sehe keinen Fehler in der Konsole. Alle Dateien sind ordnungsgemäß auf der Seite enthalten.

Quelle

2017-09-02 hidar

Ihr Vue-Skript enthält sollte direkt vor dem schließenden body-Tag sein, nicht im Kopfbereich.

<body> 
    <div id="app"> 
     <!-- Your Vue Components Here --> 
    </div> 

    <!-- Vue Scripts Here --> 
    <script src="../build/js/vue.min.js"></script> 
    <script src="../build/js/vue-router.min.js"></script> 
    <script src="../build/js/app.js"></script> 
</body>

Quelle

2017-09-03 00:40:44 Webber

immer noch nicht funktioniert, hier ist eine Müllkippe meiner index.html ... https aussehen soll: // Pastebin .com/tuGUNYgP – hidar

Ihr vue.js Skript enthält sollte direkt vor dem Ende der schließenden Body-Tag kommen – Webber

Jetzt bekomme ich Fehler "Vorlagen sollten nur für die Zuordnung des Status auf der Benutzeroberfläche verantwortlich sein. Vermeiden Sie Tags mit Nebenwirkungen in Ihrem Vorlagen wie

Ich denke, es ist möglicherweise App-ID in dem Div-Tag sein sollte, Ihre Skript Links überprüfen.

Ich habe versucht, auf codepen und es hat funktioniert, wenn man es

<div id="app"> 
    <div class='nav'> 
    <router-link to="/foo">foo</router-link> 
    <router-link to="/bar">bar</router-link> 
    <router-link to="/tar">tar</router-link> 
    </div> 


    <div class="content"> 
     <router-view></router-view> 
    </div> 
</div>

https://codepen.io/ResoGuy/pen/Jyzjxg

Quelle

2017-09-03 00:49:08

Immer noch nicht funktioniert, hier ist ein Dump meiner index.html ... https://pastebin.com/tuGUNYgP – hidar

Verwandte Themen

Unable Vuejs2 und Vue-Router zu arbeiten, ohne auf Client

Antwort

Verwandte Themen