Skip to content

Commit 66480cc

Browse files
committed
vue-router worked: vuejs/vue-cli#1875
1 parent 0239159 commit 66480cc

File tree

4 files changed

+41
-7
lines changed

4 files changed

+41
-7
lines changed

src/App.vue

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
<template>
22
<div id="app">
3-
<img alt="Vue logo" src="./assets/logo.png">
4-
<HelloWorld msg="Welcome to Your Vue.js App"/>
3+
<!-- <img alt="Vue logo" src="./assets/logo.png" />
4+
<HelloWorld msg="Welcome to Your Vue.js App" /> -->
5+
<router-link to="/foo">Go to Foo</router-link>
6+
<router-link to="/bar">Go to Bar</router-link>
7+
<router-view></router-view>
58
</div>
69
</template>
710

811
<script>
9-
import HelloWorld from './components/HelloWorld.vue'
12+
// import HelloWorld from "./components/HelloWorld.vue";
1013
1114
export default {
12-
name: 'app',
15+
name: "app",
1316
components: {
14-
HelloWorld
17+
// HelloWorld
1518
}
16-
}
19+
};
1720
</script>
1821

1922
<style>
2023
#app {
21-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
24+
font-family: "Avenir", Helvetica, Arial, sans-serif;
2225
-webkit-font-smoothing: antialiased;
2326
-moz-osx-font-smoothing: grayscale;
2427
text-align: center;

src/main.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import Vue from 'vue'
22
import App from './App.vue'
3+
import router from './router'
34

45
Vue.config.productionTip = false
56

67
new Vue({
8+
router,
79
render: h => h(App),
810
}).$mount('#app')

src/router.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import VueRouter from 'vue-router'
2+
import Vue from 'vue'
3+
4+
Vue.use(VueRouter);
5+
6+
const Foo = { template: '<div>foo</div>' }
7+
const Bar = { template: '<div>bar</div>' }
8+
9+
// 2. Define some routes
10+
// Each route should map to a component. The "component" can
11+
// either be an actual component constructor created via
12+
// `Vue.extend()`, or just a component options object.
13+
// We'll talk about nested routes later.
14+
const routes = [
15+
{ path: '/foo', component: Foo },
16+
{ path: '/bar', component: Bar }
17+
]
18+
19+
// 3. Create the router instance and pass the `routes` option
20+
// You can pass in additional options here, but let's
21+
// keep it simple for now.
22+
const router = new VueRouter({
23+
routes // short for `routes: routes`
24+
});
25+
26+
export default router;

vue.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
runtimeCompiler: true
3+
}

0 commit comments

Comments
 (0)