Back in July, we looked at how Vue CLI and webpack work and I figured that it was time to look at Vue Router, as a follow-up.  Vue Router is going to be pretty necessary for the state parks app, moving forward.

Like I did last time, I used VueCLI and Bulma.  I also put the code on Github and used Render to host the end-result at vue-router-demo.jws.app.  If you look at the repo, you will find three .vue files in the src/components folder: About.vue, Pizza.vue, and PizzaListing.vue.  If you look at src/main.js, you can see that the routes are set up like …

import About from './components/About.vue';
import Pizza from './components/Pizza.vue';
import PizzaListing from './components/PizzaListing.vue';


const routes = [
{ path: '/', component: About },
{ path: '/pizza/:id', component: Pizza },
{ path: '/pizzalisting', component: PizzaListing }
]

This makes the About file the file that loads when you go to the root of the site, the Pizza file what loads when you go to /pizza/[something], and PizzaListing loads when you go /pizzalisting.

If you have any questions, comments, etc, feel free to drop a comment below.

[ Cover photo by Peter Herrmann on Unsplash ]