VueJS Router lädt die Komponente nicht

Ich verwende VueJS Router, aber der Router lädt die Komponenten nicht.VueJS Router lädt die Komponente nicht

Ich habe About.vue und Contact.vue nur mit dem Tag zu Test - finden, wie es aussieht:

<template> 
    <div> 
    <h1>Contact page. Welcome baby!</h1> 
    </div> 
</template>

Dies ist App.vue mit drei Router-Links und Router- Aussicht.

<template> 
    <div> 
    <h1>Routing</h1> 
    <router-link to="/">Home</router-link> 
    <router-link to="/about">About</router-link> 
    <router-link to="/contact">Contact</router-link> 
    <router-view></router-view> 
    </div> 
</template>

Dies ist main.js (die Pfade Dateien importieren korrekt sind)

import Vue from 'vue' 
import App from './App.vue' 
import VueRouter from 'vue-router' 
import {routers} from './router' 

Vue.use(VueRouter); 

let router = new VueRouter({mode: 'history', routers}); 

new Vue({ 
    el:'#app', 
    router, 
    components: { 
    'app-home' : App 
    } 
});

Dies ist die JS-Datei für den Router. router.js (Pfade korrekt sind)

import About from './About.vue' 
import Contact from './Contact.vue' 
import Home from './App.vue' 

export const routers=[ 
    { 
     path: '/' , component: Home 
    }, 
    { 
    path:'/about',component:About 
    }, 
    { 
    path:'/contact',component:Contact 
    } 
]

Und das ist index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>router</title> 
</head> 
<body> 
    <div id="app"> 
     <app-home></app-home> 
    </div> 
    <script src="/dist/build.js"></script> 
</body> 
</html>

Wenn ich die Seite laden, die Haupt-Seite wie folgt aussieht:

und wenn ich auf die einzelnen Nav klicken, wird nichts von der Hauptseite außer URL geändert. URL wird

http://localhost:8080/contact

http://localhost:8080/about

aber nicht die Komponente geladen ich importiert.

Wenn Sie weitere Informationen benötigen, um Rat zu geben, zögern Sie nicht, mehr zu fragen. Und wenn Sie eine Ahnung von diesem Problem haben, schätze ich, wenn Sie hier teilen.

Vielen Dank.

Quelle

2017-09-01 Kate Yeeum Lee

Der Objektschlüssel VueRouter wird erwartet heißt routes, Sie übergeben es routers.

Try this ...

let router = new VueRouter({mode: 'history', routes: routers});

Alternativ benennen Sie "Router" Variablen "Routen".

export const routes=[

und

import {routes} from './router' 
// snip 
let router = new VueRouter({mode: 'history', routes });

Quelle

2017-09-01 03:59:47 Phil

Vielen Dank @Phil, Problem gelöst !! :) –

VueJS Router lädt die Komponente nicht

Antwort

Verwandte Themen