9.21总结

一、修改element-ui的图标颜色

        修改图标元素颜色(大部分的元素不允许修改，添加！important )

.layout-aside i{ color: #42b983 !important; }

二、下拉菜单默认选中

        $router.currentRoute.path，获取配置路径，currentRoute当前对象，调用对象中的路径

        :default-active="$router.currentRoute.path"

三、下拉菜单中index可以添加router的path路径

        <el-menu-item index="/sys-admin/temp/brand/add-new"><i class="el-icon-circle-plus"></i>添加品牌</el-menu-item>

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView,
        /*添加子元素显示*/
        children: [
            {
                path: '/sys-admin/temp/album/add-new',
                component: () => import('../views/sys-admin/temp/AlbumAddNew.vue')
            },
            {
                path: '/sys-admin/temp/brand/add-new',
                component: () => import('../views/sys-admin/temp/BrandAddNew.vue')
            },
        ]
    },
]

四、在vue中实现组件拼接显示页面 

vue页面      
        <!-- 主体 -->
        <el-main class="layout-main">
         <router-view></router-view>
        </el-main>

router配置文件

 path: '/',
        name: 'home',
        component: HomeView,
        /*添加子元素显示*/
        children: [
            {
                path: '/sys-admin/temp/album/add-new',
                component: () => import('../views/sys-admin/temp/AlbumAddNew.vue')
            },
            {
                path: '/sys-admin/temp/brand/add-new',
                component: () => import('../views/sys-admin/temp/BrandAddNew.vue')
            },
        ]

        在vue中添加视图组件，需要添加标签 <router-view></router-view>，并添加子元素。在vue中，只有一个页面，所有的页面变化都是在不断的调用其他组件在此唯一页面上变换显示，index="/sys-admin/temp/brand/add-new" index实际功能为跳转页面，但是在router的index配置中，添加了子元素，所以点击不会跳转页面，而是会在 <router-view></router-view>里显示。

        未在path添加路径，会直接跳转到App.vue的 <router-view></router-view>

         在path中添加路径，会直接跳转到HomeView.vue的 <router-view></router-view>