vue3路由里面循环

在Vue 3中，你可以使用Vue Router来创建循环路由。首先，你需要安装Vue Router库，然后在你的Vue项目中进行配置。

以下是一个简单的循环路由示例：

1. 首先，安装Vue Router库：

npm install vue-router@next

2. 在你的Vue项目中创建一个名为`router.js`的文件，并添加以下代码：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
  },
  // 添加其他路由
  // ...
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

3. 创建`Home.vue`和`About.vue`组件，并在其中编写相应的内容。例如，在`Home.vue`中，你可以添加一个循环显示的列表：

<template>
  <div>
    <h1>Home</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

4. 在你的Vue根组件中使用`router-view`来显示路由内容。例如，在`App.vue`中添加以下代码：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

5. 最后，在你的主入口文件（例如`main.js`）中导入并使用创建的路由对象：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

现在你的Vue项目中就有了循环路由。当访问`/`路径时，会显示`Home.vue`组件，其中的列表项会根据`items`数组循环显示。当访问`/about`路径时，会显示`About.vue`组件。你可以根据你的需求添加其他路由和组件。