1import { createRouter } from "vue-router";
2import HomeView from "../views/HomeView.vue";
3import UserView from "../views/UserView.vue";
4import AccountView from "../views/AccountView.vue";
5
6const router = createRouter({
7  routes: [
8    {
9      path: "/",
10      name: "home",
11      component: HomeView,
12    },
13    {
14      path: "/user",
15      name: "user",
16      component: UserView,
17    },
18    {
19      path: "/account/:id",
20      name: "account",
21      component: AccountView,
22    },
23  ],
24});
25
26export default router;

1path: "/account/:id"

1const users = [
2  {
3    id: 1,
4    name: "Homer",
5  },
6  {
7    id: 2,
8    name: "Marge",
9  },
10  {
11    id: 3,
12    name: "Lisa",
13  },
14];

1routes: [
2  {
3    path: "/account/1",
4    name: "account",
5    component: AccountView,
6  },
7  {
8    path: "/account/2",
9    name: "account",
10    component: AccountView,
11  },
12  {
13    path: "/account/3",
14    name: "account",
15    component: AccountView,
16  },
17]

页面结构示意图：动态路由

首页

/

• pages/index.vue

/account

• pages/account/index.vue

/account/123

• pages/account/[id].vue

（示例：在三个路由之间切换）