<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="//unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="app">
<p><router-link to="/about">About</router-link></p>
<p><router-link v-if="!logged" to="/login">Login</router-link></P>
<p><router-link v-if="logged" to="/logout">Logout</router-link></p>
<p><router-link v-if="logged" to="/content0">Content0</router-link></p>
<p><router-link v-if="logged" to="/content0">Content0</router-link></p>
<p><router-link v-if="logged" to="/content0">Content0</router-link></p>
<p><router-link v-if="logged" to="/content0">Content0</router-link></p>
<router-view v-bind:logged="logged"></router-view>
</div>
<script src="script.js"></script>
</body>
</html>
const About = {
template: '<div><h1>About</h1>id: admin<br>pass: pass</div>'
}
const Content0 = {
props: ['logged'],
template: '<div><h1>Content0</h1>logged: {{ logged }}</div>'
}
const Login = {
template: '<div>id:<input type="text" v-model="id"><br>pass:<input type="text" v-model="pass"><br><button v-on:click="login">Login</button></div>',
data: {
id: '',
pass: '',
},
methods: {
login: function() {
if (this.id == "admin" && this.pass == "pass")
{
app.logged = true
router.push('/')
}
}
}
}
const Logout = {
template: '<button v-on:click="logout">Logout</button>',
methods: {
logout: function() {
router.push('/')
app.logged = false
}
}
}
const routes = [{
path: '/login',
component: Login
}, {
path: '/logout',
component: Logout
}, {
path: '/about',
component: About
}, {
path: '/content0',
component: Content0
}]
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router,
data: {
logged: false,
id: '',
pass: '',
},
})
/* Styles go here */