Introduction to the method of using nested routing in Vue.js

As Vue.js single page applications (SPA) become quite complex, you start to need Vue routing and nested routing. Nested routing allows for more complex user interfaces and components nested within each other. Let's create a relatively simple use case to demonstrate the usefulness of nested routing in Vue Router.

Set up with Vue CLI

If it is not 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 install it from the command Now run the vue command. 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 elements for the UI. Add it as a stylesheet file to the public/ folder and reference it in public/index.html. To do this, we will 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 do the vue-cli Added some changes to the default files.

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

<template>
  <div id="app">
    <h1 id="Alligator-nbsp-Nest">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 directory of your project, you can hover over localhost:8080 in your browser and view Frame layout. Those display:grid properties are useful! Now we can start creating routes.

Enter Vue routing

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

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

<script>
  export default {
    name: &#39;AboutPage&#39;,
  }
</script>

<style scoped>
  
</style>

Now our main.js file needs 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 ## with the attribute to="/about" # tag. Then, change the second div to the tag. Make sure to keep the grid positioning class properties unchanged.

Now we have a fully functional site skeleton with routing handled for the “About” page.

We focus on the routing function here, so we won’t spend too much time on the style. Still, we want to make the

Travels page look a little more polished.

---

First, create a

TravelPage in the same way as creating 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: &#39;TravelAmericaPage&#39;
  }
</script>

<style scoped>
</style>

TravelChinaPage.vue

<template>
  <div>
    <p>Alligators can be found in China&#39;s Yangtze River Valley.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelChinaPage&#39;
  }
</script>

<style scoped>

</style>

Configure nested routing

Now, let’s update both

main.js and TravelPage .vue to reference these nested routes using children. 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 nesting of children can continue indefinitely.

and

TravelPage.vue can be written via:

TravelPage.vue

<template>
  <div id="travel">
    <h2 id="Travels">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: &#39;TravelPage&#39;
  }
</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>

checkout

localhost :8080, you will see that the Travels page contains 2 sub-pages! When you click on any link, our URL will update accordingly.

Summary

I hope this tutorial has been helpful for you to understand how to use nested routing!

Another note on this topic - we can define routes using dynamic segments, for example

path:'/location/:id'. That id can then be referenced as this.$route.params on the views for those routes. This feature is useful when you want to display more specific types of data (users, images, etc.) on websites and apps.

English original address: https://alligator.io/vuejs/nested-routes/

Translation address: https://segmentfault.com/a/1190000021930656

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommended: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of Introduction to the method of using nested routing in Vue.js. For more information, please follow other related articles on the PHP Chinese website!