Inhalte anpassen
Home, Foo und Bar sind erst einmal nur Platzhalter, diese sollen nun durch
sinnvollere Inhalte ersetzt werden, die Berlin-Uhr und die Lotto-App.
Die wichtigste Änderung ist der Austausch der Dummy-Instanzen, durch den
Import unserer eigenen Komponenten. Danach sind noch einige
Umbenennungen notwendig, bis alles fehlerfrei läuft.
vue/vue-routes/002/main.js (Source)
|
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 1. Define route components.
// These can be imported from other files
import lotto from './components/lotto'
// const Foo = { template: '<div>foo</div>' }
import berlinclock from './components/berlinclock'
// const Bar = { template: '<div>bar</div>' }
import home from './components/home'
// const Home = { template: '<div>Die Startseite mit der Verlinkung!!!</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: '/home', name: 'home', component: home },
{ path: '/berlinclock', name: 'berlinclock', component: berlinclock },
{ path: '/lotto', name: 'lotto', component: lotto }
]
// 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
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: `
<div id="app">
<h1>Sammelsurium</h1>
<p>Current route name: {{ $route.name }}</p>
<ul>
<li><router-link :to="{ name: 'home'}">Start</router-link></li>
<li><router-link :to="{ name: 'berlinclock'}">Berlin-Uhr</router-link></li>
<li><router-link :to="{ name: 'lotto'}">Lotto</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>
`,
components: { App }
}).$mount('#app')
|
So sieht dann die Startseite aus und ein Umschalten zu den anderen
Komponenten sollte auch reibungslos funktionieren.
Eine Beispielansicht nach dem Klick auf den Berlin-Uhr-Link: