vue开发后台管理系统_03_设置路由进行不同的页面组件跳转

1：在src/components/下创建一个layout.vue文件，这个是后台管理系统的ui框架

2：在src/components/下创建几个vue文件，需要分类管理时，可以创建文件夹，

比如：

home.vue 首页，

login.vue 登录页面，

user/uersList.vue 用户列表页面，

user/roleList.vue 角色列表页面，

user/permissionList.vue 权限列表页面

3：在文件 src/router/index.js 路由文件中引入组件

比如：

import home from '@/components/home'

import login from '@/components/login'

import userList from '@/components/user/userList'

import roleList from '@/components/user/role'

import permissionList from '@/components/user/permission'

4：在文件 src/router/index.js 路由文件中设置路由，由于登录login页面不能使用layout框架，所以login路由不放在layer.vue组件下。其他页面需要使用layout.vue框架，所以其他路由都需要作为layout.vue的子路由存在

比如：

routes: [

{

path: '/login',

name: 'login',

component: login

}, {

path: '/',

name: 'layout',

component: layout,

redirect: '/home',

children: [

{

path: '/home',

name: 'home',

component: home

}, {

path: '/user',

name: 'userList',

component: userList

}, {

path: '/user/role',

name: 'roleList',

component: roleList

}, {

path: '/user/permission',

name: 'permissionList',

component: permissionList

}

]

}

]

5：改造layout.vue的template内容，使他像一个后台管理界面

如：

<template>

<div>

<el-container>

<el-aside width="200px">

<h5>后台管理工具</h5>

<el-menu router="true">

<el-menu-item index="/home">

<i class="el-icon-menu"></i>

<span slot="title">首页</span>

</el-menu-item>

<el-menu-item index="/user">

<i class="el-icon-setting"></i>

<span slot="title">用户管理</span>

</el-menu-item>

<el-menu-item index="/user/role">

<i class="el-icon-setting"></i>

<span slot="title">角色管理</span>

</el-menu-item>

<el-menu-item index="/user/permission">

<i class="el-icon-setting"></i>

<span slot="title">权限管理</span>

</el-menu-item>

</el-menu>

</el-aside>

<el-container>

<el-header>

<el-menu mode="horizontal">

<el-menu-item index="1">后台管理工具</el-menu-item>

<el-menu-item index="2">后台管理工具</el-menu-item>

<el-menu-item index="3">后台管理工具</el-menu-item>

</el-menu>

</el-header>

<el-main>

<router-view></router-view>

</el-main>

</el-container>

</el-container>

</div>

</template>

6：首页界面如下，可点击各导航栏进行仿页面切换