当前位置: 首页 > article >正文

若依添加router-view,使用详细(若依后台管理系统添加router-view)

简介:大家都知道若依后台管理系统,它是一款基于SpringBoot,Spring Security,JWT,Vue & Element 的开发的企业级后台管理系统,可以用于管理企业网站、电子商务平台、移动应用等各种应用系统,具有良好的性能和用户体验。目前在GItHub和Gitee上已经拥有几十k的star⭐,可以免费使用,但是用户也需要遵守相关的开源协议。今天来分享下,如何在若依系统中添加router-view路由坑位

一、新建全新页面(没有侧边导航

1、首先在views文件下新建test文件夹,然后分别创建one.vue和two.vue;

2、打开若依系统 > 系统管理 > 菜单管理,点击左上角新增按钮,先选择菜单,填写组件路径,

填写完成以后,再改成选择目录,然后确定

 3、然后分别添加one.vue和two.vue文件目录;

 

 4、这样就可以在侧边导航看到,刚才新添加的文件;

5、分别在文件中添加相应代码,就可以实现如下效果;

index.vue

<template>
  <!-- test/index 路由坑位页面-->
  <center style="margin-top:50px">
    <div>
      <!-- 头部按钮 -->
      <div class="header_con">
        <button @click="$router.push('/test/one')">to one.vue</button>
        <button @click="$router.push('/test/two')">to two.vue</button>
      </div>
      <!-- 路由坑文件 -->
      <div class="router_content">
        <router-view></router-view>
      </div>
    </div>
  </center>
</template>

one.vue

<template>
  <!-- one -->
  <div style="font-size:30px">
    这是one的页面元素
  </div>
</template>

two.vue

<template>
  <!-- two -->
  <div style="font-size:30px">
    这是two的页面元素
  </div>
</template>

效果:

 router-view添加成功,但是可以看到,这里已经和若依的侧边栏不在一个页面里了,如果想同用一个侧边栏,只需在test文件下在多添加一层文件嵌套就可以了,下面也来具体说明一下,具体使用场景,具体区分;

二、同用侧边栏(有侧边导航

1、如果想同用侧边栏,需要再test文件中,添加nest嵌套文件,把vue文件放在nest文件中(文件内容不变);

2、重新配置路由地址,点击修改测试菜单,选择菜单选项,去掉组件路径,重新选择目录确定

 3、配置嵌套层,也就是router-view文件(添加思路同样),先选择菜单填写组件路径,填写完成后,重新选择目录,点击确定;

4、然后在新添加的nest嵌套上,点击新增,重新添加one.vue和two.vue(之前的one.vue和two.vue不用可以删掉);

 

结构:

 5、这样就重新添加、修改完成了,看看新的目录结构和效果;

注意事项:

1、配置router-view文件,点击新增时,先选择菜单选项,配置完组件路径以后,再重新选择目录选项,然后确定。

2、如果觉得自己配置的组件路径和文件没有问题,但是跳转出现错误,可以重新启动项目;

希望篇文章能帮助到你(●'◡'●)


http://www.kler.cn/a/37567.html

相关文章:

  • MySQL 参考文档:SQL 语句优化(SELECT 语句优化)之索引条件下推(索引下推)优化
  • windows搭建git服务器 无法识别 ‘git‘ 命令:exec: “git“: executable file not found in %PATH%
  • Spring 定时任务@Scheduled 注解中的 Cron 表达式
  • 7.kafka+ELK连接
  • 云原生之深入解析K8S的请求和限制
  • PDF转成PNG,之后PNG转成PDF
  • Linux学习之环境变量
  • Qt6 C++ 实现按住窗口拖拽移动
  • Stable Diffusion - ReV Animated v1.2.2 的 2.5D 模型与提示词
  • Redis持久化(RDB和AOF)
  • 2.数据结构--空间复杂度
  • TCP 协议(二)连接与断开
  • openGauss学习笔记-09 openGauss 简单数据管理-创建数据库
  • Pinia学习笔记 | 入门 - 映射辅助函数
  • 【Android Camera开发】深入理解相机ISP(图像信号处理)必看文章
  • (赠书活动第4期)编译语言的思考过程
  • javaweb使用Thymeleaf 最凝练的CRUD项目-中
  • Go语言TCP Socket编程
  • 深入思考Sui的独特性如何构建出跨时代的产品
  • Linux5.14 ELK企业级日志分析系统