vue+ElementUI首个实例

昨天弄了一下elementUI的实践，想想还是整理一下，省的到时候忘了
先看一下最终结果图。

首先从elementUI官网上找到了Container布局容器
将其粘贴到创建好的index.vue中，核心代码如下

<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu router :default-openeds="['0','1']">
        <el-submenu v-for="(nav,index1) in $router.options.routes" :key="index1" :index="index1+''">
          <template slot="title">
            <i class="el-icon-message"></i>
            {{nav.name}}
          </template>
          <el-menu-item
            v-for="(item,index2) in nav.children"
            :key="index2"
            :index="item.path"
            :class="$route.path==item.path?'is-active':''"
          >{{item.name}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

下面是index.js(也就是路由配置的核心代码),pageOne…等四个界面都是写好的
只包含一个h1标签

import Vue from 'vue'
import Router from 'vue-router'
import pageOne from '../components/pageOne.vue'
import pageTwo from '../components/pageTwo.vue'
import pageThree from '../components/pageThree.vue'
import pageFour from '../components/pageFour.vue'
import index from '../components/index.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/',
      name:'导航一',
      component:index,
      redirect:'/pageOne',
      children:[
        {
          path:'/pageOne',
          name:'页面一',
          component:pageOne
        },
        {
          path:'/pageTwo',
          name:'页面二',
          component:pageTwo
        }
      ]
    },
    {
      path:'/nav2',
      name:'导航二',
      component:index,
      children:[
        {
          path:'/pageThree',
          name:'页面三',
          component:pageThree
        },
        {
          path:'/pageFour',
          name:'页面四',
          component:pageFour
        }
      ]
    }
  ]
})

其中el-aside是它的侧边栏el-menu是最大的导航,el-submenu才是图片中显示的
导航一、导航二,el-menu中的:default-openeds="['0','1']"的意思是默认打开index值为0和1的el-submenu，

下面解释一下v-for，这个类似于foreach循环,(nav,index1)nav是自己起的一个元素名，index是下标，$router.options.routes这个是通过规定的语法获取路由中的routes数组，:key(我这里要加不加就出错，让他等于index1即可),:index是用来标记现在的导航栏,用于上面默认打开操作,是字符串类型,所以要加一个''来让他转换为字符串类型

.:class="$route.path==item.path?'is-active':''"这句话的意思是点击哪个页面哪个页面的导航是高亮的

让index=item.path能够在点击这个时候切换为item.path的路由
下面的$route.path是获取浏览器地址栏后面的路由

其他要解释的，如果要通过路由来改变界面,在界面中必须要有

<router-view></router-view>

来作为占位符,要不然改变不了

然后就是在访问http://localhost:8080/#/pageOne时候，/pageOne是index.js中的路由，但是它是/的children路由(子路由)，所以要访问/pageOne必然会先访问/也就是要先访问index.vue再去访问pageOne.vue，这是一种嵌套访问.