spring boot+iview 前后端分离架构之前端路由的实现（十一）

忘是亡心i 2022-01-28 05:04 179阅读 0赞

### spring boot 与 iview 前后端分离架构之前端路由的实现（十一） ###

*  公众号
 *  创建数据字典列表以及配置路由
 *  左侧导航栏触发页面路由

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg11】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 创建数据字典列表以及配置路由 #

打开我们的前端工程，然后定位到view目录在该目录底下创建sys目录，接着在sys目录底下创建dict目录，接着在dict目录底下创建一个dictList.vue文件，代码如下：

<template>
      <div>
        这是数据字典的列表
      </div>
    </template>
    <script>
      
    </script>

接着我们打开我们的router文件夹底下的index.js进行改造，改造完成以后代码如下：

import Vue from 'vue'
    import Router from 'vue-router'
    import main from '../view/main/main.vue';
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/login',
          name: 'login',
          component: resolve => {
            require(['../view/login/login.vue'], resolve);
          }
        },
        {
          path: '/main',
          name: 'main',
          meta: {
            icon: 'ios-settings',
            title: '系统首页',
            hideInMenu: true,
            requireAuth: false //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
          },
          component: resolve => {
            require(['../view/main/main.vue'], resolve);
          }
        },
        {
          path: '/sys',
          name: 'sys',
          component: main,
          meta: {
            icon: 'ios-construct',
            title: '系统管理',
            code:'system-manage',
            requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
          },
          children:[
            {
              path: 'dictList',
              name: 'dictList',
              meta: {
                icon: 'ios-paper',
                title: '字典维护',
                code:'system-manage-dict',
                requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
              },
              component: resolve => {
                require(['../view/sys/dict/dictList.vue'], resolve);
              }
            }
          ]
        }
      ]
    })

这样我们就完成了路由网关的配置，但是现在我们还无法正常的访问这个页面，我们需要改造我们的main.vue页面，将main.vue页面的以下的截图部分的内容改造成如下代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]

<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                <router-view/>
              </Content>

到此处我们就完成了简单的整合，接着我们就启动我们的前端工程，访问以下的网址：  
http://127.0.0.1:8080/\#/sys/dictList，然后可以看到如下页面则说明我们的网关已经集成成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]

# 左侧导航栏触发页面路由 #

前面我们是通过地址栏输入地址来直接响应到该页面，接着我们配置我们的右侧的菜单栏，来实现点击左侧的菜单栏的某个节点来路由到我们的数据字典的页面。  
打开我们的main.vue然后改造第48行代码如下：

<Submenu name="1">
                  <template slot="title">
                    <Icon type="ios-navigate"></Icon>
                    系统管理
                  </template>
                  <MenuItem name="1-1" to="sys/dictList">数据字典</MenuItem>
                  <MenuItem name="1-2">Option 2</MenuItem>
                  <MenuItem name="1-3">Option 3</MenuItem>
                </Submenu>

接着我们重新启动我们的前端服务，然后我们首先访问以下的地址：http://127.0.0.1:8080/\#/main页面如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
接着我们点击左侧的数据字典菜单，然后大家会看到我们成功跳转到数据字典的列表页面，到此我们就完成了我们的页面的路由。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]  
那么接下来我们就可以开始专注于我们的数据字典的业务了。  
上一篇文章地址：[spring boot+iview 前后端分离架构之接口文档的编写和所有mock数据的实现（十）][spring boot_iview _mock]  
下一篇文章地址：[spring boot+iview 前后端分离架构之数据字典模块布局和列表查询的实现（十二）][spring boot_iview]

[20191218155125364.jpg]: /images/20220128/be5ec710aac042a29da22eb79e5bb978.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20220128/443b33205dac4e618d91d32c20ecb0a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20220128/18b6e1b0efcf49b0ad5ced009327ae94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20220128/92a2f9c969ff4fe1a155ae0e0d2b7045.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20220128/a0bdebc394954fd587a446e07e78be9e.png
[spring boot_iview _mock]: https://blog.csdn.net/linzhefeng89/article/details/90454444
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/90486385