Skip to content
Snippets Groups Projects
Commit e4e5f2e4 authored by Tor-Einar Skog's avatar Tor-Einar Skog
Browse files

First version with routing to several pages

parent a10b09d6
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.html
+ 9
− 9
View file @ e4e5f2e4
......@@ -19,15 +19,15 @@
</head>
<body class="bg-light">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" id="vipsobsappmenu">
<a class="navbar-brand mr-auto mr-lg-0" href="#">
<img src="static/css/images/logo_vips_hvit.png" style="height: 27px; position: relative; top: -3px; margin-right: 15px"/>Feltobservasjoner</a>
<router-link class="navbar-brand mr-auto mr-lg-0" to="/">
<img src="static/css/images/logo_vips_hvit.png" style="height: 27px; position: relative; top: -3px; margin-right: 15px"/>Feltobservasjoner</router-link>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="vipsobsappmenu">
<div class="navbar-collapse offcanvas-collapse" >
<form class="my-2 my-lg-0">
<div class="form-group">
<input class="form-control mr-sm-2" type="text" placeholder="Brukernavn" aria-label="Brukernavn">
......@@ -40,21 +40,21 @@
<hr/>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Mine observasjoner</a>
<router-link class="nav-link" to="/" onclick="$('.offcanvas-collapse').toggleClass('open')">Mine observasjoner (startsiden)</router-link>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mine steder</a>
<router-link class="nav-link" to="/places" onclick="$('.offcanvas-collapse').toggleClass('open')">Mine steder</router-link>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Innstillinger</a>
<router-link class="nav-link" onclick="$('.offcanvas-collapse').toggleClass('open')" to="/settings">Innstillinger</router-link>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div id="app"></div>
<main id="app" role="main" class="container">
</main>
<script src="static/js/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="static/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="static/js/bootstrap.bundle.min.js"></script>
......
src/App.vue
+ 2
− 3
View file @ e4e5f2e4
<template>
<div id="app">
<img src="./assets/logo.png">
<main id="app" role="main" class="container">
<router-view/>
</div>
</main>
</template>
<script>
......
src/components/HelloWorld.vue deleted 100644 → 0
+ 0
− 113
View file @ a10b09d6
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/ObservationList.vue 0 → 100644
+ 34
− 0
View file @ e4e5f2e4
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'ObservationList',
data () {
return {
msg: 'Startsiden'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/PlacesList.vue 0 → 100644
+ 16
− 0
View file @ e4e5f2e4
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'PlacesList',
data () {
return {
msg: 'Mine steder'
}
}
}
</script>
src/components/Settings.vue 0 → 100644
+ 16
− 0
View file @ e4e5f2e4
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Settings',
data () {
return {
msg: 'Innstillinger'
}
}
}
</script>
\ No newline at end of file
src/main.js
+ 10
− 1
View file @ e4e5f2e4
......@@ -12,4 +12,13 @@ new Vue({
router,
components: { App },
template: '<App/>'
})
});
/**
* Hope this works. It's for adding router functionality to the menu,
* which is outside the main app
*/
new Vue({
el: '#vipsobsappmenu',
router
});
src/router/index.js
+ 15
− 3
View file @ e4e5f2e4
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ObservationList from '@/components/ObservationList'
import PlacesList from '@/components/PlacesList'
import Settings from '@/components/Settings'
Vue.use(Router)
......@@ -8,8 +10,18 @@ export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
name: 'ObservationList',
component: ObservationList
},
{
path: '/places',
name: 'PlacesList',
component: PlacesList
},
{
path: '/settings',
name: 'Settings',
component: Settings
}
]
})
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment