本文主要介绍如何在vue中使用router-view组件，具有一定的参考价值。有兴趣的朋友可以参考一下。希望大家看完这篇文章后收获多多。让边肖带你去了解一下。
开发vue项目往往需要认识到一个页面里面可以切换着展现不同的组件页面。
例如，在下图中，单击侧边栏中的不同组件，以路由到不同的组件页面，而侧边栏和顶部部分是不变的，切换的只是组件页面.
在这个时候，我们需要使用路由中的 router-view组件（也叫路由占位符）.
首先，我们来到需要切换不同组件页的页面,我们需要在添加 router-view组件,Home.vue.
模板
！-头部区域-
电插头
差异
imgclass='shop'src='./assets/img/shop.png'alt=' '
Span电子商务后台管理系统/span。
/div
El-buttontype=' info' @单击='注销'退出/el-button。
/el-header
集装箱
！-边栏-
！-在这里，为了便于理解，做了一些简化，这意味着点击侧边栏中的不同选项进行路由跳转-
roter-link : to='/roles '/router-link！-角色列表-
roter-link : to='/rights '/router-link！许可列表
！-路由占位符-
路由器视图/路由器视图
/模板角色列表对应的路由为/roles，权限列表对应的路由为/rights。
添加路由器视图组件并配置路由。这是路由的配置.
index.js
{
路径：'/home '，
组件：主页，
//重定向到角色列表。
redirect : '/角色'，
儿童：[
{
路径： '/权限'，
组件：权限
},
{
路径： '/角色'，
组件：角色
}
]
}感谢您仔细阅读本文。希望边肖分享的文章《如何在vue中使用路由器视图组件》对大家有所帮助。也希望大家多多支持和关注行业信息渠道，更多相关知识等着你去学习！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/47499.html