Routes not working OOTB

[Swader]

I expected the routes to work by simple adding new components and defining new routes, but it seems to need extra configuration. This is how I extended the Dashboard page's main.js:

import Vue from 'vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

import "@fortawesome/fontawesome-free/css/all.min.css";

Vue.config.productionTip = false

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || Home
    }
  },
  render (h) { return h(this.ViewComponent) },
}).$mount('#app')

I have created the Home component by renaming the Dashboard component, and created the About component. How do I make it respect these routes?

[einazare]

Hello there, @Swader ,

We're sorry, but this is an only page starter - it is only made to showcase you how to use tailwindcss to style a VueJS page. Please refer to VueJS routing:

• https://vuejs.org/v2/guide/routing.html
• https://router.vuejs.org/

Best, Manu

[Swader]

Understood, thanks