Detailed explanation of the use of router-view components in Vue

When developing a Vue project, you often need to implement a page that can switch to display different component pages.

For example: In the figure below, by clicking on different components in the sidebar, you can be routed to different component pages, while the sidebar and the top part remain unchanged, and only the component page is switched .

At this time, we need to use the router-view component (also called routing placeholder) in the route

First, we come to the page where we need to switch different component pages and add the router-view component where we need it.
Home.vue

<template>
<!--Header area-->
    <el-header>
      <div>
        <img class="shop" src="../assets/img/shop.png" alt="">
        <span>E-commerce backend management system</span>
      </div>
      <el-button type="info" @click="logout">Logout</el-button>
    </el-header>
    <el-container>
<!--Sidebar-->
	<!--This is simplified for easy understanding. It means clicking on different options in the sidebar to jump to the route-->
    <router-link :to="/roles"></router-link><!--Role list-->
    <router-link :to="/rights"></router-link><!--Permission list-->
<!--Route placeholder-->
    <router-view></router-view>
</template>

The route corresponding to the role list is /roles, and the route corresponding to the permission list is /rights.
After adding the router-view component, configure the route. The following is the route configuration

index.js

{
      path:'/home',
      component:Home,
      // Redirect to the role list redirect:'/roles',
      children:[
        {
          path:'/rights',
          component:Rights
        },
        {
          path:'/roles',
          component:Roles
        } 
      ]
    }

In this way, we have realized the use of the router-view component!

This is the end of this article about the detailed use of the router-view component in Vue. For more relevant content on the use of the Vue router-view component, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!