<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js - Florian Studio</title> </head> <style> .class1{ background: #444; color: #eee; } </style> <body> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <router-view></router-view> </div> <script> const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) const app = new Vue({ router }).$mount('#app') </script> </body>