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
登陆,点击左侧试题录入
即可访问。