Merge branch '23-add-vue-router' into 'master'

Resolve "Add vue-router"

Closes #23

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!9
This commit is contained in:
Marcel Schwarz 2020-04-15 18:34:50 +00:00
commit 3d2810148b
11 changed files with 166 additions and 78 deletions

View File

@ -11137,6 +11137,11 @@
}
}
},
"vue-router": {
"version": "3.1.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
"integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

View File

@ -9,7 +9,8 @@
},
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11"
"vue": "^2.6.11",
"vue-router": "^3.1.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0",

View File

@ -1,21 +1,14 @@
<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> |
<router-link :to="{name : 'Profile', params: {id:123}}">Profile</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;
@ -23,6 +16,18 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>

View File

@ -1,58 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@ -1,8 +1,10 @@
import Vue from 'vue'
import App from './App.vue'
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app')
router,
render: h => h(App)
}).$mount("#app");

View File

@ -0,0 +1,53 @@
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Profile from "../views/profile.vue";
import missing from "../views/missing.vue";
import Info from "../views/Info.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/profile/:id",
name: "Profile",
component: Profile,
children: [
{
path: 'info',
name: 'Info',
component: Info
}
]
},
{
path: "/profile",
name: "ProfileMain",
component: Profile
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
},
{
path: '*',
component: missing
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;

View File

@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

View File

@ -0,0 +1,18 @@
<template>
<div class="home">
<h3>Home View</h3>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: "Home",
components: {
}
};
</script>

View File

@ -0,0 +1,17 @@
<template>
<div>
<h3>info</h3>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

View File

@ -0,0 +1,13 @@
<template>
<h3>Errror 404</h3>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

View File

@ -0,0 +1,27 @@
<template >
<div>
<h3>My profile</h3>
<h4>{{$route.params.id}}</h4>
<router-link :to="{ name: 'Profile', params: {id: 456}, query: {plan: 'private'} }">Another Route</router-link>
<br>
<router-link :to="{ name: 'Info', params: {id: 3} }">Info</router-link>
<h5>{{$route.query}}</h5>
<router-view />
</div>
</template>
<script>
export default {
watch: {
$route(to, from){
console.log('to', to);
console.log('from', from);
}
}
}
</script>
<style lang="css" scoped>
</style>