JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目4 集成Vue Router与 Pinia构建动态应用(任务3-任务实施)

项目4智慧公寓管理系统的前端技术栈任务4-3

集成VueRouter与Pinia构建动态应用1HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务背景

在开发一个现代化的Web应用时，特别是在构建涉及多个页面和复杂数据交互的应用时，合理地管理路由和状态变得尤为重要。VueRouter和Pinia作为Vue生态中的两大关键库，分别为我们提供了强大的路由管理和状态管理解决方案。我们将通过构建一个房间列表页面，深入学习路由导航与Pinia状态管理。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务效果

构建一个包含首页、房间列表页和房间详情页的应用。首页作为入口点，用户可以通过它导航到房间列表页，查看所有可用的房间。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施任务准备：在ch04文件夹创建一个Example4-10文件夹，并在该文件中使用Vite构建工具创建一个roomList的Vue项目。在roomList项目的views文件夹下，新建HomeView.vue、ListView.vue和DetailView.vue等视图组件。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施1．App.vue组件App组件用于创建导航链接，允许用户点击链接并在VueRouter管理的路由之间进行导航。在App组件中有两个RouterLink组件，分别指向两个不同的路由：“/”，表示它将导航到应用的首页；“/list”，表示它将导航到房间列表页面。当用户点击这些链接时，VueRouter会将当前的URL更改为指定的路由，并在<RouterView/>组件中渲染与该路由匹配的组件。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施App.vue文件示例代码如下所示。<template><div><div><RouterLinkto="/">首页</RouterLink><RouterLinkto="/list">房间列表页面</RouterLink></div><div><RouterView/></div></div></template>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施2．HomeView.vue组件HomeView.vue组件的主要目的是与ListView.vue组件对比，实现VueRouter的路由切换功能。views/HomeView.vue文件示例代码如下所示。<template><divclass="about"><h1>首页</h1></div></template><script></script>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施3．ListView.vue组件ListView.vue组件使用了Pinia状态管理库来获取房间列表roomList，并在模板中遍历显示每个房间的图片、标题，以及一个用于查看详情的按钮。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施ListView.vue文件示例代码如下所示。<template><divclass="about"><ul><liv-for="iteminroomList":key="item.id"><img:src="item.img"alt=""/><p>{{item.title}}</p><button@click="clickHandle(item.id)">查看详情</button></li></ul><RouterView/></div></template><script>import{mapState}from"pinia";import{useRoomStore}from"../stores/counter";exportdefault{computed:{...mapState(useRoomStore,["roomList"]),},methods:{clickHandle(id){this.$router.push(`/list/detail?id=${id}`);},},};</script>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施4．DetailView.vue组件DetailView.vue组件从路由查询中获取ID，并根据ID向Pinia状态管理库获取该条房间信息，并渲染在页面上。DetailView.vue文件示例代码如下所示。<template><divclass="detail"><divclass="box"><h1>详情页面</h1><img:src="roomList[this.$route.query.id-1].img"alt=""/><h3>{{roomList[this.$route.query.id-1].title}}</h3>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施<p>房间介绍：{{roomList[this.$route.query.id-1].introduce}}</p><p>价格：{{roomList[this.$route.query.id-1].price}}</p></div></div></template><script>import{mapState}from"pinia";import{useRoomStore}from"../stores/counter";exportdefault{computed:{...mapState(useRoomStore,["roomList"]),},};</script>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施5．创建路由器实例在router/index.js中创建路由器实例，设置Vue应用的路由规则，定义用户可以通过哪些URL访问哪些视图组件，并指定了当访问这些URL时应该如何加载和显示这些组件。router/index.js文件示例代码如下所示。import{createRouter,createWebHistory}from'vue-router'importListViewfrom"../views/ListView.vue"importDetailViewfrom"../views/DetailView.vue"HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施constrouter=createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[{path:'/',redirect:'/home',},{path:'/list',component:ListView,children:[{path:'detail',component:DetailView,

}]},{path:'/home',name:'home',component:()=>import('../views/HomeView.vue'),},]})exportdefaultrouterHTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施6．创建Stroe在stores/counter.js文件中，使用Pinia定义了一个名为room的Store，该Store包含多个房间信息，并允许其他Vue组件访问该Store。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施stores/counter.js文件示例代码如下所示。import{defineStore}from'pinia'exportconstuseRoomStore=defineStore('room',{state:()=>({roomList:[{id:1,title:"房间A",introduce:"商务大床房,提供24小时热水,支持无线WIFI",price:'229',img:'/photo/2020/10/18/09/16/bedroom-5664221_1280.jpg'},{id:2,title:"房间B",introduce:"简约大床房,提供烘干机,提供24小时热水,支持无线WIFI",price:'239',img:'/photo/2014/08/11/21/40/bedroom-416062_1280.jpg'},{id:3,title:"房间C",introduce:"经济单人房,提供24小时热水,支持无线WIFI",price:'99',img:'/photo/2021/11/08/00/30/bedroom-6778199_1280.jpg'},]}),})HTML5的优势

解决了跨浏览器的问题