Skip to content

Instantly share code, notes, and snippets.

@tangoslee
Created November 2, 2018 03:03
Show Gist options
  • Save tangoslee/29cfaa11b0657ff8a5a658562d003ad9 to your computer and use it in GitHub Desktop.
Save tangoslee/29cfaa11b0657ff8a5a658562d003ad9 to your computer and use it in GitHub Desktop.
vue, router diff
$ git diff
diff --git a/package-lock.json b/package-lock.json
index 618f055..097da2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10705,6 +10705,11 @@
"vue-style-loader": "^4.1.0"
}
},
+ "vue-router": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
+ "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w=="
+ },
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/package.json b/package.json
index b05cd56..af3757a 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
- "vue": "^2.5.17"
+ "vue": "^2.5.17",
+ "vue-router": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.1.0",
diff --git a/src/App.vue b/src/App.vue
index d5330c1..238aa08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,13 @@
<template>
<div id="app">
- <img alt="Vue logo" src="./assets/logo.png">
- <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <div id="nav">
+ <router-link to="/">Home</router-link> |
+ <router-link to="/about">About</router-link>
+ </div>
+ <router-view/>
</div>
</template>
-<script>
-import HelloWorld from './components/HelloWorld.vue';
-
-export default {
- name: 'app',
- components: {
- HelloWorld,
- },
-};
-</script>
-
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
diff --git a/src/main.js b/src/main.js
index 77f35b6..33615f6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
import Vue from 'vue';
import App from './App.vue';
+import router from './router'
Vue.config.productionTip = false;
new Vue({
- render: h => h(App),
+ router,
+ render: h => h(App)
}).$mount('#app');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment