NavMenu 導航選單
阿新 • • 發佈:2020-12-30
首先引入element相關程式碼
<el-menu
:default-active="$route.path"
router
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot= "title">
<i class="el-icon-location"></i>
<span>導航一</span>
</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="/src/views/Demo.vue" >選項1</el-menu-item>
<el-menu-item index="/src/views/About.vue">選項2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
然後配置路由
{
path: '/',
name: 'Home',
component: Home,
children:[
{
path: '/src/views/About.vue' ,
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
},
{
path: '/src/views/Demo.vue',
name: 'Demo',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/Demo.vue')
}
]
},
然後通過 index屬性來進行點擊出現相對應的vue
然後需要寫 <router-view><router-view/>
佔位符才能出現相對應vue裡的內容
整體程式碼
<el-col :span="22">
<el-menu
:default-active="$route.path"
router
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>導航一</span>
</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="/src/views/Demo.vue">選項1</el-menu-item>
<el-menu-item index="/src/views/About.vue">選項2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
<router-view></router-view>