vue中router-view组件怎么用

这篇文章主要介绍了vue中router-view组件怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面

例如：下图中通过点击侧边栏不同的组件路由到不同的组件页，而侧边栏和顶部部分是不变的，切换的只是组件页面。

这个时候我们就需要用到 路由中的 router-view组件（也叫路由占位符） 了

首先我们来到 需要切换不同组件页的页面 ，在自己需要的位置 添加 router-view组件
Home.vue

角色列表对应的路由为/roles，权限列表对应的路由为/rights。
添加router-view组件后对路由进行配置，下面是路由的配置

index.js

{      path:'/home',      component:Home,      // 重定向到角色列表      redirect:'/roles',      children:[        {          path:'/rights',          component:Rights        },        {          path:'/roles',          component:Roles        }       ]    }

感谢你能够认真阅读完这篇文章，希望小编分享的"vue中router-view组件怎么用"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!