Блог

Главная - Вопросы по программированию - Получите список всех маршрутов в проекте vue и создайте карту сайта — Проект Vue

Получите список всех маршрутов в проекте vue и создайте карту сайта — Проект Vue

#javascript #vue.js #vue-router

Вопрос:

Предположим, я создал маршрут следующим образом: router.js:

 import Vue from "vue";
import Router from " vue-router";
import BookRoutes from "./routes/book";

Vue.use(Router)

const router = new Router({
    routes:[
        {
            path: "/book",
            name: "book",
            component:{
               render(c) {
                  return c("router-view")
                }
            },
            childern: BookRoutes

        }
    ]
})

Маршруты-> забронировать ->> index.js

 const BookProfile = () => 
import (/* webpackChunkNames: "BookProfile" */ "@/components/profile/book/BookProfile")

import BookRoutes from "./Book";

export default [{path: 
                "book/:bookId",
                "name": "profile.book",
                 redirect: {name: "profile.book.fee"},
                 component: BookProfile,
                 children: BookRoutes
                 
               }]

Book.Js:

 const BookFee = () => import (/* webpackChunkName: "BookProfilr" */)

export default:[{
    path: "book-fee",
    name: "profile.book.fee",
    component: BookFee
}]

Таким же образом создается почти список маршрутов, как получить список всех маршрутов, если возможно, с заполненным идентификатором, если не список всех маршрутов, созданных в проекте vue.

Если кому-нибудь понадобится дополнительная информация, пожалуйста, дайте мне знать.

Ответ №1:

Вы можете использовать getRoutes метод экземпляра маршрутизатора в любом дочернем компоненте, например :

 mounted(){
 let routes = this.$router.getRoutes()

}

Комментарии:

1. Извини, что я не понял. Я очень новичок в vue js и совершенно не могу понять. Не могли бы вы привести пример или любую статью, на которую я могу сослаться. Я не понимаю, где я могу использовать метод getRoutes и как его использовать.

2. PS: Я хочу получить список всех маршрутов сразу в списке, если это возможно.

3. Попробуйте это.$маршрутизатор.параметры.маршруты

Ответ №2:

 <template>
    <ul>
      <li v-for="(item, key) in items" :key="key">
        <router-link :to="item.name">{{item.name}}</router-link>
      </li>
    </ul>
</template>
<script>
export default {
    data() {
        return {
            items: []
        }
    },
    created() {
        this.$router.options.routes.forEach(route => {
            this.items.push({
                name: route.name,
                path: route.path
            })
        })
    }
}
</script>

Комментарии:

1. Дает ли это URL-адрес для всех вложенных или обычных маршрутов? Не могли бы вы, пожалуйста, предложить мне лучший способ создания карты сайта для всех URL-адресов, поскольку на эту тему очень мало статей.

2. Лучший способ решить вашу проблему-использовать библиотеку npmjs.com/package/vue-cli-plugin-sitemap

3. 🔀 поддержка динамических маршрутов с одним или несколькими параметрами 🍱 поддержка вложенных маршрутов

Метки: