VueJS Practice – #2 Routing

by Andrey Bulezyuk | Nov 8, 2019 | Frontend

Learning by doing – VueJS Practice part 2. Let’s take a look at how a possible school-like question on your VueJS Test would look like. And how you would go about solving it. Btw if you want to dive deep into VueJS 2, take a look at our VueJS Certificate Course.

Problem

You need to create routes for the Vue-Components that we created in the previous VueJS Practice. Create a vue-route (use Vue-Router) for each of the following Components:

• AssetsDetail.vue and AssetsList.vue
• ProductsDetail.vue and ProductsList.vue
• UsersDetail.vue and UsersList.vue

Routes for „*Detail.vue“ Components must have a url parameter „id“. Router for „*List.vue“ Components must have a url parameter „page“. Also, create a Vue Component called „navigation/TopMenu.vue“ where you generate a list of router-links to the previously created routes; use a programmatic approach.

Hint

• Vue-Router is the obvious choice for a simple routing task like this.
• Regarding URL Parameters you cheat by reading about Dynamic Routing at Vue-Router Official Docs.

VueJS Practice – Solution

To define your router with Vue-Router, you need to write your routings to router.js. Here is how our prototype looks like.

import AssetsDetail from './components/assets/AssetsDetail.vue'
import AssetsList from './components/assets/AssetsList.vue'
import UsersDetail from './components/assets/UsersDetail.vue'
import UsersList from './components/assets/UsersList.vue'
import ProductsDetail from './components/assets/ProductsDetail.vue'
import ProductsList from './components/assets/ProductsList.vue'


export default new VueRouter({
    mode: 'history',
    routes: [{
            path: '/asset/:id',
            name: 'AssetsDetail',
            component: AssetsDetail
        },{
            path: '/asset/list/:page',
            name: 'AssetsList',
            component: AssetsList
        },{
            path: '/user/:id',
            name: 'UsersDetail',
            component: UsersDetail
        },{
            path: '/user/list/:page',
            name: 'UsersList',
            component: UsersList
        },{
            path: '/product/:id',
            name: 'ProductsDetail',
            component: ProductsDetail
        },{
            path: '/product/list/:page',
            name: 'ProductsList',
            component: ProductsList
        }
    ]
})

The TopMenu.vue Component has two benefits. First, it helps you debug your router.js while you are creating your routes configuration. Second, you can import the TopMenu to the most Upper VueComponent. This ways, if a route changes, your will have adjust the TopMenu.vue only, and the whole App will be updated. This is what i came up with for the Menu.

<template>
  <div id="menu">
    <ul>
      <li v-for="(key, item) in menu" :key="key">
        <router-link :to="item.url">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TopMenu",
  data() {
    return {
      menu: [
        {name: "List of Assets", url: "/asset/list/1"},
        {name: "First Asset", url: "/asset/1"},
        {name: "List of Users", url: "/user/list/1"},
        {name: "First User", url: "/user/1"},
        {name: "List of Products", url: "/product/list/1"},
        {name: "First Product", url: "/product/1"},
      ]
    }
  }
}
</script>

That’s it for our VueJS Practice. If you want more, take a look at our more detailed VueJS Certificate Course.