Решите многоуровневую динамическую навигационную цепочку Vue

Vue.js

Хлебные крошки для фиксированных маршрутов

Когда мы настраиваем маршрутизатор, мы можем настроить хлебные крошки в мета, Например Конфигурация маршрутизации:

{
    path: '/project/process/:id',
    name: 'process',
    component: () => import('@/views/project/process/main.vue'),
    meta: [
        { name: '项目管理列表' },
        { name: '项目列表', url: '/project/list' },
        { name: '里程碑' },
    ],
},

Код:

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
        <router-link v-if="item.url" :to="item.url">{{item.name}}</router-link>
        <a v-else>
            {{item.name}}
        </a>
    </el-breadcrumb-item>
</el-breadcrumb>

Если просто для отображения, то ссылку url писать не нужно, а маршрутизация настроена так

{
    path: '/project/process/:id',
    name: 'process',
    component: () => import('@/views/project/process/main.vue'),
    meta: [‘项目管理’, '项目进度', '里程碑'],
},

Затем код:

<el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{path: '/home'}">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
    {{item}}
    </el-breadcrumb-item>
</el-breadcrumb>

Решите многоуровневую динамическую навигационную цепочку Vue

Это хорошо реализовано для некоторых относительно фиксированных хлебных крошек, но мы часто сталкиваемся с некоторой динамической маршрутизацией в проекте, Например: страница маршрутизируется как /list Перейти со страницы A на страницу B как /list/:id Под страницей B есть еще одна страница слова, /list/detail Что, если мы хотим войти на страницу B через навигационную цепочку на странице C? Как быть с такой динамической вложенной многоуровневой маршрутизацией?

Настроить маршрутизацию

...
{
    path: '/type',
    name: 'type',
    component: () => import('@/views/type/main.vue'),
    meta: [
        { name: '项目分类' },
    ],
},
{
    path: '/type/list/:id',
    name: 'list',
    component: () => import('@/views/list/type/main.vue'),
    meta: [
        { name: '项目分类', url: '/list' },
        { name: '项目列表' },
    ],
},
{
    path: '/list/detail',
    name: 'detail',
    component: () => import('@/views/type/list/detail/index.vue'),
    meta: [
        { name: '项目分类', url: '/list' },
        { name: '项目列表', url: '/type/list' },
        { name: '详情' },
    ],
},
...

Видно, что этот маршрут не имеет разницы.Единственное, что стоит отметить, это то, что страница деталей является динамическим маршрутом.Перейти со страницы деталей в список проектов нам нужна соответствующая информация ID, но в данный момент я не могу исправить, но динамическое значение.

Изменить страницу сведений

Слушайте событие beforeRouteEnter на странице этапа

beforeRouteEnter(to, from, next) {
    const meta = to.meta;
    for (let i = 0; i < meta.length; i++) {
        if (meta[i].name === '项目列表') {
            meta[i].url = `/type/list/${from.params.id}`;
        }
    }
    next();
    },

Измените метаданные в событии beforeRouteEnter, чтобы обновить навигационный маршрут навигационной цепочки.

Основная идея реализации состоит в том, чтобы добавить событие beforeRouteEnter на целевую страницу, а затем изменить ее метаконфигурационную информацию, чтобы изменить путь навигации навигационной цепочки.

Если у вас есть лучшее решение, пожалуйста, оставьте сообщение.

Категории