Skip to content

Commit

Permalink
vue-router worked: vuejs/vue-cli#1875
Browse files Browse the repository at this point in the history
  • Loading branch information
huntertran committed Nov 10, 2019
1 parent 0239159 commit 66480cc
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 7 deletions.
17 changes: 10 additions & 7 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<!-- <img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" /> -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view></router-view>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// import HelloWorld from "./components/HelloWorld.vue";
export default {
name: 'app',
name: "app",
components: {
HelloWorld
// HelloWorld
}
}
};
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
Expand Down
2 changes: 2 additions & 0 deletions src/main.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
router,
render: h => h(App),
}).$mount('#app')
26 changes: 26 additions & 0 deletions src/router.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter);

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`
});

export default router;
3 changes: 3 additions & 0 deletions vue.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
runtimeCompiler: true
}

0 comments on commit 66480cc

Please sign in to comment.