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：首页界面如下，可点击各导航栏进行仿页面切换
以上是 vue开发后台管理系统_03_设置路由进行不同的页面组件跳转 的全部内容， 来源链接： utcz.com/z/378073.html
