vue router-view传值,vue routerview

　　本文主要介绍了路由器视图组件在vue中的使用。此时，我们需要在路由中使用路由器视图组件(也称为路由占位符)。本文通过示例代码非常详细的介绍给大家，有需要的朋友可以参考一下。

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

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

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

　　首先，我们来到了需要切换不同组件页的页面，这里我们需要在添加 router-view组件Home.vue。

　　模板

　　！-头部区域-

　　El-标题

　　差异

　　img class=shop src=./assets/img/shop.png alt=

　　Span电子商务后台管理系统/span

　　/div

　　El-button type= info @ click= logout 退出/el-button

　　/el-header

　　el容器

　　！-边栏-

　　！-在这里，为了便于理解，它被简化了，这意味着点击侧边栏中的不同选项来进行路线跳转-

　　router-link:to=/roles /router-link！-角色列表-

　　router-link:to=/rights /router-link！-许可列表-

　　！-路线占位符-

　　路由器视图/路由器视图

　　/模板

　　角色列表对应的路由是/roles，权限列表对应的路由是/rights。

　　添加路由器视图组件后配置路由。以下是路由的配置。

　　index.js

　　{

　　路径：“/home”，

　　成分：家，

　　//重定向到角色列表

　　重定向：“/角色”，

　　儿童：[

　　{

　　路径：“/rights”，

　　组成部分：权利

　　},

　　{

　　路径：“/角色”，

　　组件：角色

　　}

　　]

　　}

　　这样，我们就实现了路由器视图组件的使用！

　　关于vue中路由器视图组件使用的详细说明，本文到此结束。有关vue路由器视图组件使用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。