【Vue-Router】嵌套路由

footer.vue

<template><div><router-view></router-view><hr><h1>我是父路由</h1><div><router-link to="/user">Login</router-link><router-link to="/user/reg" style="margin-left: 10px;">Reg</router-link></div></div>
</template><script setup lang="ts"></script><style scoped></style>

list.json

{"data": [{"name": "面","price":300,"id": 1},{"name": "水","price":400,"id": 2},{"name": "菜","price":500,"id": 3}]}

login.vue

<template><h1>我是列表页面</h1><table cellpadding="0" class="table" border="1"><thead><tr><th>商品</th><th>价格</th><th>操作</th></tr></thead><tbody><tr :key="item.id" v-for="item in data"><th>{{ item.name }}</th><th>{{ item.price }}</th><th><button @click="toDetail(item)">详情</button></th></tr></tbody></table>
</template><script setup lang="ts">
import { data } from './list.json'
import { useRouter } from 'vue-router';const router = useRouter()type Item = {name: string;price: number;id: number;
}const toDetail = (item: Item) => {router.push({// name 对应 router 的 namename: 'Reg',// 不会展示在URL上，存在于内存里params: {id: item.id}})
}
</script><style scoped>
.table {width: 400px;
}
</style>

reg.vue

<template><h1>我是列表页面</h1><button @click="router.back()">返回</button><div style="font-size: 20px;">品牌：{{ item?.name }}</div><div style="font-size: 20px;">价格：{{ item?.price }}</div><div style="font-size: 20px;">id： {{ item?.id }}</div>
</template><script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { data } from './list.json';const router = useRouter();
const route = useRoute();
// 返回对象用item接收
console.log(route);const item = data.find(v => v.id === Number(route.params.id))</script><style scoped>
.reg {background-color: green;height: 400px;width: 400px;font-size: 20px;color: white;
}
</style>

index.ts

import { createRouter, createWebHistory, RouteRecordRaw,  } from "vue-router";const routes: Array<RouteRecordRaw> = [{path: "/user",component: () => import("../components/footer.vue"),children:[{path: "",name: 'Login',component: () => import("../components/login.vue")},{path: "reg",name: 'Reg',component: () => import("../components/reg.vue")}]},
]const router = createRouter({history: createWebHistory(),routes
})export default router

App.vue

<template><h1>hello world</h1><hr><router-view></router-view>
</template><script setup lang="ts"></script><style scoped></style>