17827015192018

更新时间：试题数量：购买人数：提供作者：

有效期：个月

章节介绍：共有个章节

收藏

我的练习

我的错题
(0道)

我的收藏
(0道)

我的斩题
(0道)

我的笔记
(0道)

专项练习

顺序练习 练习进度 0 / 0

随机练习 自定义设置练习量

模拟考试 仿真模拟

题型练习 按题型分类练习

易错题 精选高频易错题

学习资料 考试学习相关信息

搜索

题库预览

电影详情页路由参数、数据匹配与跳转难度：较难所属类型：路由题目要求请补全路由配置和详情页组件代码，实现以下功能： 1. 访问 / 时重定向到 /home； 2. 访问 /movie/2 时，详情页根据路由参数 id 查找对应电影； 3. 找到电影时，显示电影名称和电影类型； 4. 找不到电影时，显示"未找到电影"和"未知类型"； 5. 根据是否找到电影生成提示文本； 6. 单击"返回首页"按钮后，通过编程式导航跳转到 /home。代码框架 // router.js import { createRouter, createWebHistory } from 'vue-router' import Home from './components/Home.vue' import MovieDetail from './components/MovieDetail.vue' const routes = [ // 空1：配置重定向到 /home { path: '/', ________________ }, { path: '/home', component: Home }, // 空2：配置电影详情页动态路由参数 id { path: ________________, component: MovieDetail } ] const router = createRouter({ history: createWebHistory(), routes }) export default router  <template> <div> <p>电影名称：{{ movie.title }}</p> <p>电影类型：{{ movie.type }}</p> <p>{{ tip }}</p> <button @click="goHome">返回首页</button> </div> </template> <script setup> import { computed } from 'vue' import { useRoute, useRouter } from 'vue-router' const route = useRoute() const router = useRouter() const movies = [ { id: '1', title: '电影一', type: '动画' }, { id: '2', title: '电影二', type: '科幻' }, { id: '3', title: '电影三', type: '剧情' } ] const movie = computed(() => { // 空3：补全电影匹配逻辑 // 要求： // 1. 先从 route.params 中获取当前路由参数 id； // 2. 再从 movies 数组中查找 id 相同的电影对象； // 3. 如果找到了电影，则返回该电影对象； // 4. 如果没有找到，则返回 { title: '未找到电影', type: '未知类型' }。 ________________ ________________ ________________ ________________ ________________ }) const tip = computed(() => { // 空4：补全提示文本逻辑 // 要求： // 1. 如果当前电影标题为"未找到电影"，返回"当前电影不存在"； // 2. 否则返回"正在查看:"加上电影标题。 ________________ ________________ ________________ }) function goHome() { // 空5：补全返回首页逻辑，使用 router 跳转到 /home ________________ } </script>