Vue从零开始开发管理系统（学习笔记第六节）

前言

---

一、首页路由的重定向

创建一个welcome页面vue文件，之后打开index.js进行编写

import Welcome from '../components/WelcomePage.vue'

const routes = [
    {
    path:'/home',
    component:Home,
    redirect:'/welcome',
    children:[{path:'/welcome',component:Welcome}]
    }
]

<el-main> 
    <router-view></router-view> 
</el-main>

二、左侧菜单实现点击跳转

<el-menu :router="true"></el-menu>
<el-menu-item :index="subitem.path">

router:

是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 

三、开发用户列表

1.创建UserPage.vue文件，并在路由中添加规则

import Users from '../components/user/UsersPage.vue'

const routes = [ 
    { path: '/home', component: Home, redirect: '/welcome', children: [ 
        { path: '/welcome', component: Welcome}, 
        { path: '/users', component: Users} 
        ] 
    } 
]

2. 二级菜单常亮

在<el-menu>中添加属性:default-active=""，并在data数据中心中增加一个新的对象保存path，在<el-menu-item>中添加@click方法，并传递.path为形参，在methods实现此方法并额外保存至sessionStorage中，每次created时读取这些值。

<el-menu :default-active="OpenIndex" > 
<el-menu-item :index="subitem.path" v- for="subitem in item.children" :key="subitem.id" @click="saveIndex(subitem.path)">

data(){
    return{
        OpenIndex:""
    };
},
created(){
    this.OpenIndex=window.sessionStorage.getItem('path')
},
methods:{
    saveIndex(path){
        this.OpenIndex=path
        window.sessionStorage.setItem('path',path)
}

3.制作面包屑导航 

在element-ui中引入，并编写面包屑

        <el-breadcrumb separator-class="el- icon-arrow-right"> 
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> 
            <el-breadcrumb-item>用户管理</el-breadcrumb-item> 
            <el-breadcrumb-item>用户列表</el-breadcrumb-item> 
        </el-breadcrumb>

4. 添加卡片

在element-ui中引入，并在全局css中美化面包屑的间距

        <el-card>
            123 
        </el-card>


在全局css中
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 12px;
}

---

总结