若依添加router-view，使用详细（若依后台管理系统添加router-view）

小鱼儿 2023-10-13 16:35 76阅读 0赞

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

#### 一、新建全新页面**（没有侧边导航）** ####

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

![922d2e64dca4435ba9ba4cf01e62b450.png][]

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

**填写完成以后，再****改成选择目录，然后确定****；**

![4f94bc309d5245b79e47dee831dfe6c0.png][]

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

![aca2c1b57e3d4fbca447ca33f072e375.png][]

![a0c747bbca3543c0b850a3814df9e935.png][]

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

![fda10f22fff54baca19523d92260fd13.png][]

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

**index.vue**

**one.vue**

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

**two.vue**

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

**效果：**

![ddb21853777c41fba3e5fc32759983ea.gif][]

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

#### 二、同用侧边栏**（有侧边导航）** ####

**1、****如果想同用侧边栏，需要再test文件中，添加nest嵌套文件，把vue文件放在nest文件中（文件内容不变）；**

![9b14130d07c84c05976617f11cd7af91.png][]

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

![ab7195c3120440149c9c6f21d107aef5.png][]

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

![cbae7f4374904d0a8f2981bf10346c48.png][]

**4、****然后在新添加的nest嵌套上，点击新增，重新添加one.vue和two.vue（之前的one.vue和two.vue不用可以删掉）；**

![5dd4c67b25f54318b7d15176e308af5c.png][]

![0530f57f3e294f6d9aa88b7ab389a2d7.png][]

**结构：**

![c31db01c0a8e4dcb8184de62d55c91a7.png][]

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

![6b029e30972940828d0bfaeaed267e93.gif][]

**注意事项：**

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

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

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

[922d2e64dca4435ba9ba4cf01e62b450.png]: https://img-blog.csdnimg.cn/922d2e64dca4435ba9ba4cf01e62b450.png
[4f94bc309d5245b79e47dee831dfe6c0.png]: https://img-blog.csdnimg.cn/4f94bc309d5245b79e47dee831dfe6c0.png
[aca2c1b57e3d4fbca447ca33f072e375.png]: https://img-blog.csdnimg.cn/aca2c1b57e3d4fbca447ca33f072e375.png
[a0c747bbca3543c0b850a3814df9e935.png]: https://img-blog.csdnimg.cn/a0c747bbca3543c0b850a3814df9e935.png
[fda10f22fff54baca19523d92260fd13.png]: https://img-blog.csdnimg.cn/fda10f22fff54baca19523d92260fd13.png
[ddb21853777c41fba3e5fc32759983ea.gif]: https://img-blog.csdnimg.cn/ddb21853777c41fba3e5fc32759983ea.gif
[9b14130d07c84c05976617f11cd7af91.png]: https://img-blog.csdnimg.cn/9b14130d07c84c05976617f11cd7af91.png
[ab7195c3120440149c9c6f21d107aef5.png]: https://img-blog.csdnimg.cn/ab7195c3120440149c9c6f21d107aef5.png
[cbae7f4374904d0a8f2981bf10346c48.png]: https://img-blog.csdnimg.cn/cbae7f4374904d0a8f2981bf10346c48.png
[5dd4c67b25f54318b7d15176e308af5c.png]: https://img-blog.csdnimg.cn/5dd4c67b25f54318b7d15176e308af5c.png
[0530f57f3e294f6d9aa88b7ab389a2d7.png]: https://img-blog.csdnimg.cn/0530f57f3e294f6d9aa88b7ab389a2d7.png
[c31db01c0a8e4dcb8184de62d55c91a7.png]: https://img-blog.csdnimg.cn/c31db01c0a8e4dcb8184de62d55c91a7.png
[6b029e30972940828d0bfaeaed267e93.gif]: https://img-blog.csdnimg.cn/6b029e30972940828d0bfaeaed267e93.gif