Vue-router: перебирайте маршруты для динамического создания ‹router-link›.

Я хотел бы перебрать мой routes с помощью v-for, чтобы динамически генерировать <router-link> в разделе template.

В настоящее время я понятия не имею, как обратиться к параметру router, определенному в main.js, в разделе template моего компонента jvds-navigation.vue.

Вот скрипты, я добавил комментарии, где возникает моя проблема:

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

// Import the routes file
import { routes } from './router/routes.js'

// Router
Vue.use(VueRouter)
const router = new VueRouter({
    routes,
    base: __dirname,
    mode: 'history'
})

new Vue({
    router, // short for "router: router"
    render: h => h(App),
}).$mount('#app')

App.vue

<template>
    <span id="app" class="o-root">
        <jvds-navigation class="..."></jvds-navigation>
        <router-view></router-view>
    </span>
</template>

<script>
import JvdsNavigation from "@/components/layout/jvds-navigation.vue"

export default {
name: "App",
    components: {
        JvdsNavigation
    }
};
</script>

jvds-navigation.vue

<template>
<div>
    <div class="[...]">

    <!-- 
        `nav` should have a `v-for` over the routes imported 
        in main.js (example given, but wrong). 
        But how can I address routes here?
    -->

    <nav class="[...]" v-for="routeItem in routes">
        <!-- These should be created dynamically... -->
        <router-link to="/about">
            <a>About</a>
        </router-link>
        <router-link to="/cv">
            <a>CV</a>
        </router-link>
        <router-link to="/contact">
            <a>Contact</a>
        </router-link>
  </nav>
  </div>
</div>

<script>
// How do I get `routes` (imported in main.js) recognized by
// this component in order to be able to loop over it in the
// `template` section?
export default {
  name: "jvds-navigation"
};
</script>

Спасибо за любые советы, хитрости и подсказки!


vue.js vue-router v-for
person Robert Wildling    schedule 28.07.2018    source источник

Ответы (1)


arrow_upward
18
arrow_downward

Используйте v-for на router-link. Я использовал this.$router.options.routes для получения всех маршрутов. Вы также можете передать его как реквизит jvds-navigation.

Это небольшой пример того, как вы можете это сделать:

примеры маршрутов

const routes = [
  {
    path: '/',
    component: Home,
    name: 'Home',
  },
  {
    path: '/about',
    component: About,
    name: 'About'
  },
];

шаблон

<nav>
  <router-link v-for="route in routes" :key="route.path" :to="route.path">
    {{route.name}}
  </router-link>
</nav>

скрипт

export default {
  name: 'Navigation',
  data() {
    return {
      routes: this.$router.options.routes
    };
  }
  // or use computed
  // computed: {
  //   routes() {
  //     return this.$router.options.routes;
  //   }
  // }
}
person Phil    schedule 28.07.2018
comment
это устарело? Невозможно использовать v-for для корневого элемента компонента с отслеживанием состояния, так как он отображает несколько элементов. - person mangrove108; 06.06.2021
comment
Может быть. Я проверю его! - person Phil; 06.06.2021
comment
Не уверен, что я что-то ломаю, но я просто обернул router-link в отдельный компонент и передал маршрут в качестве реквизита. Тогда петля не на маршрутизаторе, а на окружающем компоненте. - person DerStoffel; 07.06.2021
comment
Я попробовал то, что вы описали, и это сработало для меня. Со старым роутером и с новым (›4). Возможно, вы забыли установить свойство name в объекте маршрутов. Не могли бы вы создать jsfiddle или что-то подобное? Возможно, я могу помочь тебе. - person Phil; 07.06.2021