vue3 使用v-for，使数组每一项跳转相应页面

实现功能：

for循环出的每一项或其中一项能够跳转相应页面

代码：

首先在路由中注册要跳转到的页面路径

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

const routes: Array<RouteRecordRaw> = [
  { 
    path: '/convert',
    name: 'convert',
    component: () => import('../view/convert/index.vue') 
  },
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router;

在实现功能文件中，引入

import { useRouter } from "vue-router";
const router = useRouter();

接下来 看一下引用结构吧

template

<div v-for="(item, index) in List" :key="index" @click="SkipTo(item.url)">
  //内容
</div>

数组

const List = [
  {
    title: "hi",
    message: "world",
    url: "/convert"
  },
];

methods

const SkipTo = (url : string) => {
  router.push(url);
}

总结

路由引入+点击事件 就可以实现 数组中的每项能够分别跳转不同页面