Vue.js workshops

# Navigation

# Vue.JS - Router


# Start from here

Open this codesandbox once you are logged in: Codesandbox template (opens new window)

Don't forget to select Auto Save from File menu on the codesandbox editor.

# Add vue-router

The navigation will need some components in order to do the navigation. For that we imported them so they can be used. Verify the following components were imported in the App.vue component.

 //App.vue & main.js
import Podcasts from "./components/Podcasts";
import Podcast from "./components/Podcast";
import About from "./components/About";

Next we have to add the vue-router. We do this by using the "Add Dependency" button on the left side of the window. Once clicked, in the search box type vue-router and click on the first find (vuejs official).

With the new dependency added we have to go to the main.js file. Here we use the following lines to import it just above the new Vue({...}).

//main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);

The Vue.use(VueRouter) will let Vue know that we want to use the router.

Verify the following components were imported in the main.js.

 // main.js
import Podcasts from "./components/Podcasts";
import Podcast from "./components/Podcast";
import About from "./components/About";

With the router imported let's build the routing strategy. Add the following just above the new Vue instance.

let router = new VueRouter({
    mode: "history",
    routes: [
        { path: "/", component: Podcasts },
        { path: "/podcasts", component: Podcasts },
        { path: "/about", component: About },
        { path: "/:id", component: Podcast },
        { path: "*", component: Podcasts }
    ]
    });

What did we just add?

We instantiate a new variable named router using the imported vue router. We add inside the mode: "history" which means that the url will be clean without the #. Something like this: http://...../podcasts instead of http://..../#/podcasts . After that we just specify for what path in the browser what component to load. For example for the http://..../about please load the About component.

There is one special route inside the router { path: "/:id", component: Podcast }. This one specifies that the :id is a dynamic variable and it will have different values. It means that the http://..../222 will go the Podcast component and 22 will be available inside the component. We will be able to access it like this: this.$route.params.id where $route is available all the time, because we told Vue to use the router here: Vue.use(VueRouter);

There are 2 more things that we have to do.

The first one is to use the router inside the instance of Vue that will be our app. We do this by adding the router inside the new Vue({...}).

//main.js
new Vue({
    router,
    render: h => h(App)
}).$mount("#app");

The second one is to got into the App.vue and specify where the components will be loaded by the router. Replace the template tag with the new one:

<template>
    <router-view/>
</template>

The <router-view/> is the place where the router will insert the content of the component based on the route from the browser.

Now that we have all the parts in place it is time to play a little with the url of the page. So update the ending parts of your page to see it working:

https://[your codesandbox url]/
https://[your codesandbox url]/about
https://[your codesandbox url]/32323

You should see the content of the pages updated based on the url you used. So about, podcasts and podcast detail will be shown in the browser.

One more thing: we have to update the PodcastsHeader.vue component to use router-link, the way vue-router knows how to do navigation, to go to the homepage. Replace the anchor tag with the new router-link:

//PodcastsHeader.vue
<router-link to="/" class="text-white h2">Podca</router-link>

Time to show the podcasts transcript

In order to show the transcript we have to be able to navigate from the podcasts page to the individual podcast.

We'll update the header of every podcast to take us to the podcasts page. Inside the Podcasts component replace this:

//Podcasts.vue
<a href="single-post.html">{{show.title}}</a>

with this:

  <router-link :to="`/${show.id}`">{{show.title}}</router-link>

The router-link is like an anchor but it uses the router-view that is defined in App.vue. So when a router-link is cliked it will just execute the route defined in :to and display it in the router-view

TIP

Well done! You now have navigation!

← REST →