0

是否可以使用 Vue Router 为通过 for 循环添加的组件创建内部导航？

  ┌────────────────────────────────────────────────────────────────┐
  │                           Application                          │
  │                                                                │
  │  ┌──────────────────────────────────────────────────────────┐  │
  │  │                          Router                          │  │
  │  │                                                          │  │
  │  │  ┌────────────────────────────────────────────────────┐  │  │
  │  │  │                        View                        │  │  │
  │  │  │                                                    │  │  │
  │  │  │  ┌──────────────────────────────────────────────┐  │  │  │
  │  │  │  │        v-for component in components         │  │  │  │
  │  │  │  │                                              │  │  │  │
  │  │  │  │  ┌──────────────────┐  ┌──────────────────┐  │  │  │  │
  │  │  │  │  │    Component     │  │    Component     │  │  │  │  │
  │  │  │  │  │ ┌──────────────┐ │  │ ┌──────────────┐ │  │  │  │  │
  │  │  │  │  │ │    Router    │ │  │ │    Router    │ │  │  │  │  │
  │  │  │  │  │ │ ┌──────────┐ │ │  │ │ ┌──────────┐ │ │  │  │  │  │
  │  │  │  │  │ │ │   View   │ │ │  │ │ │   View   │ │ │  │  │  │  │
  │  │  │  │  │ │ │          │ │ │  │ │ │          │ │ │  │  │  │  │
  │  │  │  │  │ │ │          │ │ │  │ │ │          │ │ │  │  │  │  │
  │  │  │  │  │ │ │          │ │ │  │ │ │          │ │ │  │  │  │  │
  │  │  │  │  │ │ └──────────┘ │ │  │ │ └──────────┘ │ │  │  │  │  │
  │  │  │  │  │ │              │ │  │ │              │ │  │  │  │  │
  │  │  │  │  │ └──────────────┘ │  │ └──────────────┘ │  │  │  │  │
  │  │  │  │  │                  │  │                  │  │  │  │  │
  │  │  │  │  └──────────────────┘  └──────────────────┘  │  │  │  │
  │  │  │  │                                              │  │  │  │
  │  │  │  └──────────────────────────────────────────────┘  │  │  │
  │  │  │                                                    │  │  │
  │  │  └────────────────────────────────────────────────────┘  │  │
  │  │                                                          │  │
  │  └──────────────────────────────────────────────────────────┘  │
  │                                                                │
  └────────────────────────────────────────────────────────────────┘

我可以使用内部状态变量和一堆 v-if 语句来显示所需的视图，但是能够为组件定义内部路由以使用 vue-router 控制视图状态会很好。

我尝试添加一个新的路由器，createRouter()但我不知道如何use为组件添加路由器（如createApp().use(mainRouter);）

主路由器的应用程序视图

<template>
    <section class="home">
        <car-panel v-for="item in itemList" 
                   :id="item.id"
                   />
    </section>
</template>

<script>
import { ref, onMounted } from 'vue';
import Panel from '@/components/Panel.vue';

export default {
    components: { Panel },
    setup() {
        const itemList = ref([]);

        onMounted(() => {
            // insert a random number of items above 1
            for (var i = 0; i < Math.floor(Math.random() * 5) + 1; i++) {
                itemList.value.push({
                    id: i.toString()
                });
            }
        });

        return {
            itemList,
        };
    },
}
</script>

控制板

<template>
    <article class="panel">
        <panel-nav></panel-nav>
        <router-view></router-view>
    </article>
</template>

<script>
import { createRouter, createWebHashHistory } from 'vue-router';
import PanelNav from '@/components/PanelNav.vue';

export default {
    name: 'Panel',
    components: {
        PanelNav,
    },
    props: {
       id: { type: String },
    },
    setup() {
        const router = createRouter({
            history: createWebHashHistory(),
            routes: [
                { path: '/content', name: 'content', component: ContentView },
                { path: '/', redirect: 'content' },
            ],
        });

        return {};
    },
}
</script>

编辑 1

这种骇人听闻的废话非常接近：

  • 添加:name="id"到<router-view>
  • 与组件对象一起使用addRoute，键为id
<template>
    <article class="panel">
        <panel-nav></panel-nav>
        <router-view :name="id"></router-view>
    </article>
</template>

<script>
import { toRefs } from 'vue';
import { useRouter } from 'vue-router';
import PanelNav from '@/components/PanelNav.vue';
import ContentView from '@/views/ContentView.vue';

export default {
    name: 'Panel',
    components: {
        PanelNav,
    },
    props: {
       id: { type: String },
    },
    setup(props) {
        const { id } = toRefs(props);
        const router = useRouter();
        let comps = {};
        comps[id.value] = ContentView

        // add a route to the /home route
        router.addRoute('home', {
            path: `${id.value}/content`,
            components: comps,
        });

        return {};
    },
}
</script>

这使我可以转到 /home/0/content，这会将ContentView组件添加到面板中。但是，正如@jeremy castelli 所建议的那样，我一次只能这样做Panel一次。因此，如果我转到/home/0/content，面板 0 将显示内容。如果我去/home/1/content，面板 0 将停止显示内容，面板 1 将显示它 - 不是我所追求的

编辑2：

最终，我放弃了这个项目的这个想法，并回到一个反应state字符串和一系列视图组件v-if="state === 'this-state'"来管理它们。如果我找到更好的方法，我可能会回去重构

编辑 3（最终）

建议将每个子组件放入一个<iframe>中，以便它们每个都有一个单独的 URL。

这将要求面板是一个单独的应用程序，但这基本上就是这样做的

4

0 回答 0