According to the process of jumping from the front-end page of the project

Front-end page jump process

1. The process of jumping to the login page

First find the login.vue file under views, view the login.vue file, and find the handleLogin() {} function

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

Here is the code to log in successfully and jump

Find the index.js file under the router, view the routing jump configuration of /

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

Find the @/views/index page to modify the index.vue page

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

2. The process of adding a new menu

1. Select the menu button

2. Add a first-level menu

3. Add a secondary menu

Structure of the database table

Data structure example in database

3. Page jump

1. Add your own module

2. Pay attention to the road strength of the view

3. The dynamic routing of the framework is well configured, and they are all dynamically obtained from the database. When writing code, you need to pay attention to the specifications and keep consistent with the framework.