脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue router-view组件使用

vue中router-view组件的使用详解

 更新时间：2021年10月25日 10:44:05   作者：jiangjunyuan168  
这篇文章主要介绍了vue中router-view组件的使用,这个时候我们就需要用到路由中的 router-view组件（也叫路由占位符）了，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下

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

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

请添加图片描述

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

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

<template>
<!--头部区域-->
    <el-header>
      <div>
        <img class="shop" src="../assets/img/shop.png" alt="">
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
<!--侧边栏-->
	<!--这里为了好理解所以做了一下简化，意思就是点击侧边栏不同选项进行路由跳转-->
    <roter-link :to="/roles"></router-link><!--角色列表-->
    <roter-link :to="/rights"></router-link><!--权限列表-->
<!--路由占位符-->
    <router-view></router-view>
</template>

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

index.js

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

这样我们就实现了对router-view组件的使用啦！

到此这篇关于vue中router-view组件的使用详解的文章就介绍到这了,更多相关vue router-view组件使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue3中的setup执行时机与注意点说明

    Vue3中的setup执行时机与注意点说明

    这篇文章主要介绍了Vue3中的setup执行时机与注意点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • vue实现列表展示示例详解

    vue实现列表展示示例详解

    这篇文章主要为大家介绍了vue实现列表展示的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 手把手教你vue-cli单页到多页应用的方法

    手把手教你vue-cli单页到多页应用的方法

    本篇文章主要介绍了手把手教你vue-cli单页到多页应用的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 在vue中配置不同的代理同时访问不同的后台操作

    在vue中配置不同的代理同时访问不同的后台操作

    这篇文章主要介绍了在vue中配置不同的代理同时访问不同的后台操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue中的过滤器及其时间格式化问题

    vue中的过滤器及其时间格式化问题

    这篇文章主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-04-04
  • vue项目中的public、static及指定不编译文件问题

    vue项目中的public、static及指定不编译文件问题

    这篇文章主要介绍了vue项目中的public、static及指定不编译文件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • Vue中@click事件的常见修饰符用法总结

    Vue中@click事件的常见修饰符用法总结

    这篇文章主要给大家介绍了关于Vue中@click事件的常见修饰符用法的相关资料,@click事件修饰符是在Vue组件中用来修改@click事件行为的特殊标记,需要的朋友可以参考下
    2023-10-10
  • vue打包之后的dist文件如何运行

    vue打包之后的dist文件如何运行

    我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?这篇文章主要给大家介绍了关于vue打包之后的dist文件如何运行的相关资料,需要的朋友可以参考下
    2023-05-05
  • Vue3 路由页面切换动画 animate.css效果

    Vue3 路由页面切换动画 animate.css效果

    这篇文章主要介绍了Vue3路由页面切换动画animate.css效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-09-09
  • vuex+axios+element-ui实现页面请求loading操作示例

    vuex+axios+element-ui实现页面请求loading操作示例

    这篇文章主要介绍了vuex+axios+element-ui实现页面请求loading操作,结合实例形式分析了vuex+axios+element-ui实现页面请求过程中loading遮罩层相关操作技巧与使用注意事项,需要的朋友可以参考下
    2020-02-02

最新评论