美化布局和嵌套路由 day3

美化页面

• 添加标题

  
  image.png
• 改变标题样式

.layout-logo{
    color: #ffffff;
    line-height: 30px;
    font-size: 20px;
    height: 30px;    
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}

效果如图:

image.png

• 改变整体布局
  删除以下代码以去掉横线:
  image.png
  添加以下代码，让内容区域更加协调:1.
  <Layout style="height:calc(100vh - 64px)">
  image.png
  效果如图:
  image.png
• 删掉以下代码以删除不必要的顶部菜单栏(按自己需求):

<Breadcrumb :style="{margin: '24px 0'}">
            <BreadcrumbItem>Home</BreadcrumbItem>
            <BreadcrumbItem>Components</BreadcrumbItem>
            <BreadcrumbItem>Layout</BreadcrumbItem>
          </Breadcrumb>
          <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">Content</Content>

效果如图:

image.png

• 美化菜单栏
  1.按需求增加item或者删除不必要的item，并且修改文字。

 <MenuItem name="0">
              <Icon type="ios-navigate"></Icon>工作区域
            </MenuItem>
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>用户管理
              </template>
              <MenuItem name="1-1" to="/userlist">用户列表</MenuItem>
              <MenuItem name="1-2">用户统计</MenuItem>
            </Submenu>

效果如图:

image.png

• 在iView官网上拷贝图标代码，替换掉默认图标:

  
  image.png

嵌套路由

• 在views目录下新建user文件夹，再新建userlist.vue文件，里面随便写个div测试用:

  
  image.png
• 配置index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Test01 from '@/views/Test01'
import userlist from '@/views/user/userlist'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Test01',
      component: Test01,

      children: [
        {
          path: 'userlist',
          name: 'userlist',
          component: userlist
        }
      ]
    }
  ]
})

• 在layout里面添加<router-view></router-view>语句:
  image.png

• 使用to的语法 可以跳转到嵌套的页面。

  
  image.png
  

  效果图:

  
  image.png
  上面这个页面(userlist.vue)是嵌套在Test01.vue里面的，而Test01.vue
  是在App.vue里面显示的；我们接下来写一个跟App.vue相同级别的页面。

登录页面

• 在views目录下新建一个login文件夹，再新建一个login.vue文件:

  
  image.png
  

  login.vue:

<template>
    <button @click="login">登录</button>
</template>

<script>
// 跳转到主页面
export default {
    methods:{
        login(){
            this.$router.push("/")
        }
    }
}
</script>

<style>

</style>

• 在index.js添加路由:

import Vue from 'vue'
import Router from 'vue-router'
import Test01 from '@/views/Test01'
import userlist from '@/views/user/userlist'
import login from '@/views/login/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/',
      name: 'Test01',
      component: Test01,

      children: [
        {
          path: 'userlist',
          name: 'userlist',
          component: userlist
        }
      ]
    }
  ]
})

• 运行后浏览器输入http://localhost:8080/#/login
  整体项目效果如下:
  image.png
  image.png
  image.png
  上面第二张图片可以看到，一进来的时候是一篇空白的，只有跳转到Test01.vue的嵌套页面后才有内容显示，这显然不是我们想要的，我们希望它有默认页面。