若依项目前端页面跳转的流程

前端页面跳转的流程

1、登录页面跳转的流程

先找到 views下面的login.vue 文件、查看 login.vue 文件、查找 handleLogin() {} 函数

this.$router.push({ path: this.redirect || "/" }).catch(()=>{});

这里代码登录成功 进行跳转

找到 router下面的index.js 文件 、查看 /的路由跳转配置

 //首页的跳转
  {
    
    
    path: '',
    component: Layout,
    redirect: 'index',
    children: [
      {
    
    
        path: 'index',
        component: () => import('@/views/index'),
        name: 'Index',
        meta: {
    
     title: '首页', icon: 'dashboard', affix: true }
      }
    ]
  }

找到@/views/index 页面 可以修改index.vue 页面

<template>
  <div class="app-container home">
    <!-- 首页 -->
    <h1> welcome index page </h1>
  </div>
</template>

2、添加新菜单的流程

1、选中菜单按钮

2、添加一级菜单

3、添加二级菜单

数据库表的结构

数据库中的数据结构示例

3、页面跳转

1、添加自己的模块

2、注意视图的路劲

3、框架动态路由配置好、都是从数据库动态获取、写代码需要注意规范、和框架保持一致就可以