Хлебные крошки должны быть функцией, которую мы часто используем в наших проектах.В общем, она используется для представления нашего текущего местоположения сайта, а также может помочь нам быстрее вернуться на предыдущий уровень.
Сегодня мы поговорим о том, как реализовать хлебные крошки в проектах Vue. Все следующие случаи реализованы с использованием Element-UI.
самый глупый способ
Самый глупый метод, о котором мы подумали сначала, состоял в том, чтобы исправить это на каждой странице, которая нуждается в хлебных крошках.
<template>
<div class="example-container">
<el-breadcrumb separator="/">
<el-breadcrumb-item
v-for="(item,index) in breadList"
:key="index"
:to="{ path: item.path }"
>{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
name: "Example",
data() {
return {
breadList: [{
name: "首页",
path: "/home"
}, {
name: "系统设置",
path: "/setting"
}, {
name: "用户管理",
path: "/setting/usermanage"
}]
};
}
};
</script>
Если это реализовать вышеописанным способом, то хотя мы и можем доделать функцию хлебных крошек, но она недостаточно гибкая, и добавление ее на каждую требуемую страницу принесет огромные затраты на обслуживание.
Самое главное, что делать, когда ваши продукты меняются каждый день, не уставая. Некоторые люди говорят, что брат Дэн, мне нравится вот так меняться, только так у меня будет рабочая нагрузка.
Ну, я этого не говорил, но советую вам быть добрым.Брат Дэн советует вам как можно быстрее закончить тяжелую монотонную работу, а остальное время вы можете свободно упорядочивать и перезаряжать.
Иначе какой прогресс вы берете? Обычные люди всегда любят жаловаться, что у них нет времени, но хорошие люди таким образом экономят время. Они знают, что важно, а что нет.
Но все же есть люди, которые говорят, что я просто хочу спокойно писать код, а остальное мне не нужно. Это хорошо, но явно недостаточно убедительно, чтобы писать таким образом.
Используйте метаданные о маршрутизации
Приведенный выше способ очень непринужденный и явно не то, что нам нужно, поэтому давайте рассмотрим второй способ реализации.
Мы можем настроить структуру маршрута в мета-свойстве Route.
const router = new Router({
routes: [{
path: '/example',
name: 'example',
component: Example,
meta: {
breadList: [{
name: "首页",
path: "/home"
}, {
name: "系统设置",
path: "/setting"
}, {
name: "用户管理",
path: "/setting/usermanage"
}]
}
}
]
});
export default router;
Затем мы используем вычисляемые свойства непосредственно на странице для получения данных.
<template>
//...省略
</template>
<script>
export default {
name: "Example",
computed: {
breadList() {
return this.$route.meta.breadList || [];
}
}
};
</script>
Это также может привести к желаемому эффекту, но это все еще кажется избыточным.Данные маршрутизации были определены один раз, и добавлены специальные данные хлебных крошек, что приводит к дублированию кода, что все еще не является убедительным.
Затем Дэн Гэ научит вас более убедительному трюку. Приготовьте небольшой блокнот для записей.
совпадающее свойство объекта маршрута
Во-первых, давайте взглянем на официальное введение в matched.
matched: возвращает массив, содержащий записи маршрута для всех вложенных фрагментов пути текущего маршрута.
Видно, что когда мы определяем структуру маршрутизации, мы можем получить запись маршрутизации текущей страницы.
Сначала мы создаем компонент хлебных крошек.
//Breadcrumb.vue
<script>
export default {
data() {
return {
breadList: [] // 路由集合
};
},
watch: {
$route() {
this.getBreadcrumb();
}
},
methods: {
isHome(route) {
return route.name === "home";
},
getBreadcrumb() {
let matched = this.$route.matched;
//如果不是首页
if (!this.isHome(matched[0])) {
matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
}
this.breadList = matched;
}
},
created() {
this.getBreadcrumb();
}
};
</script>
После создания компонента внедрите его туда, где это необходимо. Если структура вашей веб-страницы разумна и уместна, все веб-страницы можно использовать только с одной ссылкой.
Это действительно «один код для всего».
Определенная информация о маршрутизации выглядит следующим образом:
const router = new Router({
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: Home,
meta: { title: '首页' }
},
{
path: '/setting',
name: "setting",
component: () => import('./views/setting/Setting.vue'),
redirect: '/setting/user',
meta: { title: '系统设置' },
children: [{
path: 'user',
component: () => import('./views/setting/UserMange.vue'),
name: 'usermanage',
meta: { title: '用户管理' }
}, {
path: 'message',
component: () => import('./views/setting/MesMange.vue'),
name: 'mesmanage',
meta: { title: '短信管理' }
}]
},
{
path: '/example',
name: 'example',
component: Example,
meta: { title: '综合实例' }
}
]
});
export default router;
Видно, что мы очень гибки для достижения нужного нам эффекта. Может эта функция не идеальна, например, что делать, если на некоторых страницах она не нужна?
На самом деле, этого можно достичь, если мы фильтруем данные, например, используя данные хлебных крошек, чтобы они были пустыми, когда мета не существует, или добавляя данные, чтобы отметить реальность скрытых хлебных крошек. Ожидание — это идея. Ребята, дайте волю своему воображению.
Лучше десять раз посмотреть, чем самому шлепнуть. Таким образом, очки знаний могут быть освоены быстро. Наконец, верхний и нижний рендеринг доступны для всеобщего обозрения.
Наконец, если вы считаете, что статья хорошая и вас вдохновляет, лайк — это отношение и признание.
Публичный аккаунт WeChat: Liuxiao Dengdeng, больше статей о галантерейных товарах, здесь много моих историй, добро пожаловать на общение друг с другом.