Practical example of nested routes in vue.js Router

Preface

As your Vue.js single-page application (SPA) becomes fairly complex, you'll start to need Vue routers and nested routes. Nested routes allow for more complex user interfaces and components that are nested within each other. Let's create a relatively simple use case to demonstrate the usefulness of nested routes in Vue Router.

Setting up with Vue CLI

If it isn't already installed, run the following command to install Vue CLI globally:

$ npm install -g @vue/cli

or

$ yarn global add @vue/cli

Now you can run vue commands from the command line. Let's create a Vue app called alligator-nest:

$ vue create alligator-nest

Select the default preset at the prompt (press Enter). After that, run the following command:

$ npm install vue-router

Then, open the alligator-nest directory in the editor of your choice.

Basic Code

The following CSS will help us position the elements for our UI. Add it as a stylesheet file in the public/ folder and reference it in public/index.html. To do this, we’ll use CSS grid:

grid.css

.row1 {
  grid-row-start: 1;
  grid-row-end: 2;
}

.row12 {
  grid-row-start: 1;
  grid-row-end: 3;
}

.row123 {
  grid-row-start: 1;
  grid-row-end: 4;
}

.row2 {
  grid-row-start: 2;
  grid-row-end: 3;
}

.row23 {
  grid-row-start: 2;
  grid-row-end: 4;
}

.row3 {
  grid-row-start: 3;
  grid-row-end: 4;
}

.col1 {
  grid-column-start: 1;
  grid-column-end: 2;
}

.col12 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.col123 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.col1234 {
  grid-column-start: 1;
  grid-column-end: 5;
}

.col2 {
  grid-column-start: 2;
  grid-column-end: 3;
}

.col23 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.col234 {
  grid-column-start: 2;
  grid-column-end: 5;
}

.col3 {
  grid-column-start: 3;
  grid-column-end: 4;
}

.col34 {
  grid-column-start: 3;
  grid-column-end: 5;
}

.col4 {
  grid-column-start: 4;
  grid-column-end: 5;
}

Next, let's make some changes to the default files added by vue-cli.

Delete HelloWorld.vue from the src/components folder and delete everything related to it from src/App.vue. Make the following changes to the HTML markup and CSS styles in App.vue.

<template>
  <div id="app">
    <h1 class="row1 col12">Alligator Nest</h1>
    <a class="row1 col3">Travels</a>
    <a class="row1 col4">About</a>
    <div class="row2 col234"></div>
  </div>
</template>
html, body {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  padding: 2%;
  height: 100%;
  display: grid;
  grid-template-rows: 20% 80%;
  grid-template-columns: 25% 25% 25% 25%;
}

If you run npm run serve in the root of your project, you can hover over localhost:8080 in your browser and see the skeleton layout. Those display:grid properties are useful! Now we can start creating routes.

Enter Vue Router

Create a component called AboutPage.vue in the /components folder. It looks like this:

<template>
  <div>
    <h2>About</h2>
    <p>Alligators were around during the time of the dinosaurs.</p>
  </div>
</template>

<script>
  export default {
    name: 'AboutPage',
  }
</script>

<style scoped>
  
</style>

Now our main.js file requires the /about route. It looks like this.

import VueRouter from 'vue-router';
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

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

import AboutPage from './components/AboutPage.vue';

const routes = [
  { path: '/about', component: AboutPage },
]

const router = new VueRouter({
  routes
})

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

Finally, let's go back to App.vue and change the "About" anchor tag to a <router-link> tag with the attribute to="/about" . Then, change the second div to a <router-view> tag. Make sure to keep the grid positioning class properties unchanged.

We now have a fully functional site skeleton with routing handled for the About page.

We're focusing on routing here so we won't spend too much time on styling. However, we also want to make the Travels page look a little more polished.

First, create a TravelPage in the same way as you created the AboutPage. Reference it in main.js.

You also need to create the following two components, which will eventually be nested in TravelPage.vue:

TravelAmericaPage.vue

<template>
  <div>
    <p>Alligators can be found in the American states of Louisiana and Florida.</p>
  </div>
</template>

<script>
  export default {
    name: 'TravelAmericaPage'
  }
</script>

<style scoped>
</style>

TravelChinaPage.vue

<template>
  <div>
    <p>Alligators can be found in China's Yangtze River Valley.</p>
  </div>
</template>

<script>
  export default {
    name: 'TravelChinaPage'
  }
</script>

<style scoped>

</style>

Configuring nested routes

Now, let's update both main.js and TravelPage.vue to use children to reference these nested routes. main.js must be updated to have the following definition for the routes constant:

const routes = [
  {
    path: '/travel', component: TravelPage,
    children: [
      { path: '/travel/america', component: TravelAmericaPage },
      { path: '/travel/china', component: TravelChinaPage}
    ]
  },
  {
    path: '/about', component: AboutPage
  }
];

Note that the nesting of children can continue indefinitely.

And TravelPage.vue can be written in the following way:

TravelPage.vue

<template>
  <div id="travel">
    <h2 class="row1">Travels</h2>
    <div class="flex-container row2">
      <router-link to="/travel/america">America</router-link>
      <router-link to="/travel/china">China</router-link>
    </div>
    <router-view class="row3"></router-view>
  </div>
</template>

<script>
  export default {
    name: 'TravelPage'
  }
</script>

<style scoped>
div {
  text-align: center;
}

#travel {
  display: grid;
  grid-template-rows: 20% 40% 40%;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}
</style>

Check out localhost:8080 and you'll see that the Travels page has 2 subpages! When you click on any of the links, our URL will be updated accordingly.

Summarize

I hope this tutorial has helped you understand how to use nested routes!

Additional notes on this topic - we can define routes with dynamic segments, such as path:'/location/:id'. Then on the views for those routes, you can reference that id as this.$route.params. This feature is useful when you want to display more of a specific type of data (users, images, etc.) on your website or app.

This is the end of this article about nested routing in vue.js Router. For more relevant vue.js nested routing content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!