Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use the router-view component in vue, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

In developing vue projects, you often need to implement a page that can switch to display different component pages.

For example: in the following figure, different components are routed to different component pages by clicking on the sidebar, while the sidebar and the top part are unchanged, only the component page is switched.

At this point, we need to use the router-view component (also known as routing placeholder) in the route.

First, let's go to the page where we need to switch between different component pages, and add the router-view component where we need it.

Home.vue

Withdrawal of e-commerce background management system

The route for the role list is / roles, and the route for the permission list is / rights.

Configure the route after adding the router-view component. Here is the configuration of the route.

Index.js

{path:'/home', component:Home, / / redirect to role list redirect:'/roles', children: [{path:'/rights', component:Rights}, {path:'/roles', component:Roles}]} Thank you for reading this article carefully I hope the article "how to use router-view components in vue" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.