spring boot + Vue + iView前后端分离架构(Mac版) -- (八)前端路由的实现

spring boot + Vue + iView前后端分离架构(Mac版) – (八)前端路由的实现

小景哥哥博客

###一、创建试题录入页面demo

在hep-admin-web-->src-->view-->exam下创建saveQuestion.vue文件，此文件只作为简单的展示，后续再做扩展。

<template>
  <div>
    试题录入页面demo
  </div>
</template>
<script>
  
</script>

修改hep-admin-web-->src-->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: '/main',
      name: 'main',
      meta: {
        icon: 'ios-settings',
        title: '系统首页',
        hideInMenu: true,
        requireAuth: false //表示当前响应的请求是否需要进行登录拦截验证[true:需要；false:不需要]
      },
      component: resolve => {
        require(['../view/main/main.vue'], resolve);
      }
    },
    {
      path: '/login',
      name: 'login',
      component: resolve => {
        require(['../view/login/login.vue'], resolve);
      }
    },
    {
      path: '/exam',
      name: 'exam',
      component: main,
      meta: {
        icon: 'ios-construct',
        title: '试题管理',
        code:'system-manage',
        requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证[true:需要；false:不需要]
      },
      children:[
        {
          path: 'saveQuestion',
          name: 'saveQuestion',
          meta: {
            icon: 'ios-paper',
            title: '试题录入',
            code:'system-manage-dict',
            requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证[true:需要；false:不需要]
          },
          component: resolve => {
            require(['../view/exam/saveQuestion.vue'], resolve);
          }
        }
      ]
    }
  ]
})

修改hep-admin-web-->src-->view-->main-->main.js文件，将原来的content换成<router-view/>

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

此时启动项目访问http://localhost:8080/#/exam/saveQuestion可以看到我们的demo页面，说明网关已集成完毕。

二、左侧导航栏触发页面路由

前面是通过地址栏输入地址来直接响应到该页面，接着我们配置左侧的菜单栏，来实现点击左侧的菜单栏的某个节点来路由到试题录入页面。

修改hep-admin-web-->src-->view-->main-->main.vue，把要点击的菜单配置to=""选项，<MenuItem name="1-1" to="exam/saveQuestion">试题录入</MenuItem>。

<MenuItem name="1-1" to="/exam/saveQuestion">试题录入</MenuItem>

三、启动项目验证

启动前端项目cnpm run dev，访问http://127.0.0.1:8080/#/login页面，输入admin/123456登陆，点击左侧试题录入即可访问。