JSFiddle - React, Tailwind, and code Playground

by rigor789

HTML

<div id="app">
  <div class="a">
    <button v-if="stack.length >= 2" @click="back">Back</button> {{ route }}
    <button v-if="!['/', '/login'].includes(route)" @click="replace('/', {clearHistory: true})">
      Logout
    </button>
    <hr>

    <button v-if="route === '/'" @click="push('/login')">
      Login
    </button>

    <button v-if="route === '/login'" @click="replace('/articles', {clearHistory: true})">
      List articles
    </button>

    <ul v-if="route === '/articles'">
      <li><button @click="push('/article/1')">
        Article #1
      </button></li>
      <li><button @click="push('/article/2')">
        Article #2
      </button></li>
      <li><button @click="push('/article/3')">
        Article #3
      </button></li>
    </ul>

    <ul v-if="route === '/article/1'">
      <li>
        Article #1
      </li>
      <li><button @click="replace('/article/2')">
        Article #2
      </button></li>
      <li><button @click="replace('/article/3')">
        Article #3
      </button></li>
    </ul>
    <ul v-if="route === '/article/2'">
      <li><button @click="replace('/article/1')">
        Article #1
      </button></li>
      <li>
        Article #2
      </li>
      <li><button @click="replace('/article/3')">
        Article #3
      </button></li>
    </ul>

    <ul v-if="route === '/article/3'">
      <li><button @click="replace('/article/1')">
        Article #1
      </button></li>
      <li><button @click="replace('/article/2')">
        Article #2
      </button></li>
      <li>
        Article #3
      </li>
    </ul>
  </div>



  <pre>{{ stack | json }}</pre>
</div>

JavaScript

new Vue({
  el: '#app',

  data: {
    stack: [
      '/'
    ]
  },

  computed: {
    route() {
      return this.stack[this.stack.length - 1]
    }
  },

  methods: {
    push(route) {
      this.stack.push(route)
    },
    replace(route, options = {}) {
      if (options.clearHistory) {
        this.stack = []
      }
      this.stack.pop()
      this.push(route)
    },
    back() {
      if (this.stack.length > 1) {
        this.stack.pop()
      }
    }
  }
})