Слияние кода завершено, страница обновится автоматически
Это компонент бокового меню, основанный на вторичной обёртке element-ui. Он позволяет быстро генерировать соответствующие подменю на основе данных и решает проблему, когда меню не активируется при активации пути.
npm i qf-sub-menu -S
yarn add qf-sub-menu
Сначала необходимо иметь набор данных, основанных на конфигурации маршрута пользователя, сгенерированных на основе разрешений. Эти данные должны быть следующими:
const routes = [
{
path: 'Welcome',
name: 'Welcome',
component: Welcome,
meta: {
name: 'Управление главной страницей',
icon: 'iconfont icon-shouye'
}
},
{
path: 'StudentManager',
name: 'StudentManager',
redirect:"/StudentManager/studentProduct",
component: StudentManager,
meta: {
name: 'Управление учениками',
icon: 'iconfont icon-xueyuan'
},
children: [
{
path: 'studentProduct',
name: 'studentProduct',
component: studentProduct,
meta: {
name: 'Управление проектами учеников',
icon: 'iconfont icon-wode1'
}
},
{
path: 'studentProfile',
name: 'studentProfile',
component: studentProfile,
meta: {
name: 'Личные данные учеников',
icon: 'iconfont icon-kaoqin2'
}
},
{
path: 'studentDormitory',
name: 'studentDormitory',
component: studentDormitory,
meta: {
name: 'Общежития учеников',
icon: 'iconfont icon-shuju2'
}
}
]
}
]
const router = new VueRouter({
routes
})
export default router
Как показано выше, атрибут meta содержит имя, которое будет использоваться для создания имени меню. Если есть атрибут children, то будет создано соответствующее подменю. Атрибут icon — это имя класса значка меню (предварительно установите значки шрифтов).
Импортируйте компонент qf-sub-menu, поскольку наш компонент основан на вторичной обёртке element-ui, нам нужно сначала настроить element-ui:
Установите element-ui
yarn add element-ui
import Vue from "vue"
import App from "./App"
// Импорт element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import qfSubMenu from "qf-sub-menu" // Импорт нашего компонента
Vue.use(ElementUI)
// Использование Vue.use() для внедрения компонентов во все дочерние компоненты
Vue.use(qfSubMenu)
new Vue({
h=>h(App)
}).$mount('#app')
Используйте как обычный компонент и введите источник данных. Имя атрибута должно быть sideMenu (это источник данных, описанный в разделе 3-1). Пример кода выглядит следующим образом:
<el-menu :default-active="$route.path"
class="el-menu-vertical-demo"
text-color="#4e5bf8"
ref="sideMenu"
active-text-color="#E47833"
:collapse="isCollapse">
// Наш компонент
<qf-sub-menu :sideMenu='sideMenu'></qf-sub-menu>
</el-menu>
Обязательно используйте его вместе с маршрутом.
Непосредственно добавьте атрибут :default-active="$route.path" к компоненту el-menu:
//:default-active="$route.path"
<el-menu :default-active="$route.path" // Добавляем этот атрибут
class="el-menu-vertical-demo"
text-color="#4e5bf8"
ref="sideMenu"
active-text-color="#E47833"
:collapse="isCollapse">
<!-- <subMenu :sideMenu='sideMenu'></subMenu> -->
<sub-menu :sideMenu='sideMenu'></sub-menu>
</el-menu>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )