Vue整合SpringBoot项目实战之动态路由处理

末蓝、 2023-03-01 10:05 4阅读 0赞

# Vue整合SpringBoot项目实战之动态路由处理 #

**源码**：

*  [前端项目代码][Link 1]
 *  [后端项目代码][Link 2]

**系列文章**：

1.  [Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目][Vue_SpringBoot_Vue_Element-Ui]
2.  [Vue整合SpringBoot项目实战之后端业务处理][Vue_SpringBoot]
3.  [Vue整合SpringBoot项目实战之Vue+SpringBoot][Vue_SpringBoot_Vue_SpringBoot]
4.  [Vue整合SpringBoot项目实战之Element-ui组件][Vue_SpringBoot_Element-ui]
5.  [Vue整合SpringBoot项目实战之解决前后端分离的跨域问题][Vue_SpringBoot 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDc3MTcz_size_16_color_FFFFFF_t_70]

**实现动态路由表映射**：

const routes = [
      { 
        path:'/',
        name:'学生',
        component:index,
        redirect:'/StuManage',
        children:[
          { 
            path: '/StuManage',
            name: '学生信息',
            component: StuManage,
            children:[
              
            ]
          },
          { 
            path: '/AddStu',
            name: '添加学生',
            component: AddStu
          }
        ]
      },
      
    ]

配置好路由表，接下来进行前端页面的渲染，这里只是进行前端渲染的Vue的简单操作，并没有由后端给出路由表，实现动态路由的渲染。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nhjJYR7o-1595506611735)(C:\\Users\\董鹏超\\Desktop\\Vue实现前后端分离\\笔记\\images\\渲染.png)\]

**应用：**

<template>
      <div id="app">
        <el-container style="height: 500px; border: 1px solid #eee">
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu router :default-openeds="['0','1']">
                
              <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
                <template slot="title">
                  
                  <i class="el-icon-menu"></i>{
       {item.name}}
                </template>
                 
                <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path" :class="$route.path==item2.path?'is-active':''">{
       {item2.name}}</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
      </div>
    </template>
    
    <script> import HelloWorld from "./components/HelloWorld.vue"; export default { name: "app", components: { HelloWorld }, data() { const item = { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }; return { tableData: Array(20).fill(item) }; } }; </script>
    
    <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style>

**：module绑定对象**

color: \#333;  
line-height: 60px;  
\}

.el-aside \{  
color: \#333;  
\}

**：module绑定对象**
    
    **:  rules：绑定校验规则**

[Link 1]: https://github.com/Relyonyou/Vue-Element-UI-demo
[Link 2]: https://github.com/Relyonyou/Vue-SpringBoot--demo
[Vue_SpringBoot_Vue_Element-Ui]: https://blog.csdn.net/qq_45077173/article/details/107546781
[Vue_SpringBoot]: https://blog.csdn.net/qq_45077173/article/details/107546914
[Vue_SpringBoot_Vue_SpringBoot]: https://blog.csdn.net/qq_45077173/article/details/107546812
[Vue_SpringBoot_Element-ui]: https://blog.csdn.net/qq_45077173/article/details/107546764
[Vue_SpringBoot 1]: https://blog.csdn.net/qq_45077173/article/details/107542793
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDc3MTcz_size_16_color_FFFFFF_t_70]: /images/20230209/02af59c4443a47ec822d723bac903c2d.png