Vue期末考试速成复习指南附编程题（js开发基础+路由+Pinia）

最新推荐文章于 2024-10-05 01:22:45 发布

训山

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量1.7k

点赞数 37

文章标签： vue vue.js

本文链接：https://blog.csdn.net/Bew1tch/article/details/141755683

版权

前文：

本文参考书籍《Vue.js前端开发实战（第二版）》--黑马程序员/编著

重点在于本科期末速成和0基础入门

目录：

一.初识Vue

1.包管理工具：npm yarn

1）yarn

①yarn安装的npm指令：

npm install yarn -g

②验证yarn安装：

yarn -v

③常用指令

yarn init ：初始化

yarn install：（可简写为yarn）为项目安装所有包

yarn remove/up/add 包名：用于卸载/更新/添加指定名称的包。

2.创建Vue项目

1）手动创建

①npm

npm create vite@latest

②yarn

yarn create vite
cd vite-project
yarn #安装全部依赖
yarn dev #启动服务

作业：

1.什么是Vue？使用Vue进行项目开发具有哪些优势？

2.简述什么是MVVM模式？简要说明MVC和MVP的相同点与不同点？

二.js开发基础

1.什么是单文件组件？

答：

每个.vue文件都可用来定义一个单文件组件，Vue中的单文件组件是Vue组件的文件格式。

每个单文件组件由模板<template>、样式<style>、逻辑<script>三部分组成

2.单文件组件基本结构

<template>
  <div class="demo">Demo组件</div>
</template>
<script>
/* 此处编写组件的逻辑 */
</script>
<style>
.demo{
font-size:22px;
font-weight:bold;
}
</style>

3.切换页面显示组件

#修改src\main.js
import App from'./components/Demo.vue'

3.数据绑定与输出

#②数据输出
<template>
  {{message}}
</template>
#①数据绑定
<script setup>
const message（数据名）=‘哇达西是斌子酱’（数据值）
</script>

4.Vue引入Html页面

创建一个html页面 D:\vue\chapter02\helloworld.html 通过<script>标签引入Vue

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World案例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
</body>
</html>

5.ref（）函数

简洁：ref()函数用于将数据转换成响应式数据

创建src\components\Ref.vue文件

<template>{{ message }}</template>
<script setup>
import { ref } from 'vue'
const message = ref('欧克了兄弟们我是画面二号')
setTimeout(() => {
  message.value = '哇达西我是画面一号'
}, 2000)
</script>

效果：两秒后切换页面效果

6.reactive（）函数

简介：reactive()函数用于创建一个响应式对象或数组

创建src\components\Reactive.vue文件。

<template>{{ obj.message }}</template>
<script setup>
import {reactive}from'vue'
const obj=reactive（{message:'一号文字'}）
setTimeout(()=>{
obj.message='二号文字'
},2000)
</script>

7.toRef（）和toRefs函数

toRef()函数用于将响应式对象中的单个属性转换为响应式数据。

toRefs()函数用于将响应式对象中的所有属性转换为响应式数据。

响应式数据 = toRef(响应式对象, '属性名')

创建src\components\ToRef.vue文件

<template>
<div>message的值：{{}message}</div>
<div>obj.message的值：{{obj.message}}</div>
</template>
<script setup>
import {reactive,toRef} from 'vue'
const obj=reactive({message:'我是1号'})
const message=toRef(obj(响应式对象),'message'（属性名）)
setTimeout(()=>{
 message.value='我是二号数据'
}，2000)
</script>

8.v-text

简介：v-text用于渲染DOM元素的文本内容，如果文本内容中包含HTML标签，那么浏览器不会对

其进行解析。v-text的语法格式如下。

<标签名 v-text="数据名"></标签名>

创建src\components\VText.vue文件。

<template>
<div v-text="message"></div>
</template>
<script setup>
const message = '<span>赵力波牛波一</span>'
</script>

8.v-html

简介：在使用Vue进行内容渲染时，如果内容中包含HTML标签并且希望这些标签被浏览器解析，

则可以使用v-html。v-html用于渲染DOM元素的HTML内容，其用法与v-text相似。v-html的语法格式如下。

创建src\components\VHtml.vue文件。

<template>
<div v-html="html"></div>
</template>
<script setup>
const html = '<strong>赵力波牛波二</strong>'
</script>

9.v-bind属性动态绑定

用法：<标签名 v-bind:属性名="数据名"></标签名>

创建src\components\VBind.vue文件。

#placeholder是一个占位符。
<template>
<p><input type="text" v-bind:placeholder="username"></p>
<p><input type="password" :placeholder="password"></p>
</template>
<script setup>
const username = '请输入用户名'
const password = '请输入密码'
</script>

10.v-on

简介：给DOM元素绑定事件，实现交互。

用法：<标签名 v-on:事件名="事件处理器"></标签名>

创建src\components\VOn.vue文件。

<template>
<button @click="showInfo">输出信息</button>
</template>
<script setup>
const showInfo = () => {
console.log('欢迎来到Vue.js的世界！')
}
</script>

11.双向数据绑定v-model

简介：了v-model指令来实现双向数据绑定，使用它可以在input、textarea和

select元素上创建双向数据绑定。

用法：<标签名 v-model="数据名"></标签名>

创建src\components\VModel.vue文件。

<template>
请输入姓名：<input type="text" v-model="username">
<div>姓名是：{{ username }}</div>
<input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">={{n1+n2}}
</template>
<script setup>
import { ref } from 'vue'
const username = ref('zhangsan')
</script>

12.条件渲染指令v-if

用法：

<标签名 v-if="条件A">展示A</标签名>

<标签名 v-else-if="条件B">展示B</标签名>

<标签名 v-else>展示C</标签名>

创建src\components\VIf.vue文件。

<template>
小明的学习评定等级为：
<p v-if="type === 'A'">优秀</p>
<p v-else-if="type === 'B'">良好</p>
<p v-else>差</p>
<button @click="type = 'A'">切换成优秀</button>
<button @click="type = 'B'">切换成良好</button>
<button @click="type = 'C'">切换成差</button>
</template>
<script setup>
import { ref } from 'vue'
const type = ref('B')
</script>

13.v-for列表渲染指令

用法：

①根据数组渲染<标签名 v-for="(item, index) in arr"></标签名>

②根据对象渲染<标签名 v-for="(item, name, index) in obj"></标

签名>

③根据数字渲染<标签名 v-for="(item, index) in num"></标签名>

④根据字符串渲染<标签名 v-for="(item, index) in str"></标签名>

为了给v-for一个提示，以便它能跟踪每个节点的身份，从而对现有元素进行重用和重新排序，

建议通过key属性为列表中的每一项提供具有唯一性的值。

<div v-for="item in items" :key="item.id"></div>

演示使用v-for根据一维数组渲染列表

<template>
<div v-for="(item, index) in list" :key="index">
索引是：{{ index }} --- 元素的内容是：{{ item }}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive(['HTML', 'CSS', 'JavaScript'])
</script>

演示使用v-for根据对象数组渲染列表

<template>
<div v-for="item in list" :key="item.id">
id是：{{ item.id }} --- 元素的内容是：{{ item.message }}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive([
{ id: 1, message: '梅', }, { id: 2, message: '兰', },
{ id: 3, message: '竹', }, { id: 4, message: '菊', }
])
</script>

演示使用v-for根据对象渲染列表

<template>
<div v-for="(value, name) in user" :key="name">
属性名是：{{ name }} --- 属性值是：{{ value }}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const user = reactive({ id: 11, name: '小明', gender: '男' })
</script>

三.组件基础：

1.组合式API和选项式API：

简介：选项式API是一种通过包含多个选项的对象来描述组件逻辑的API，其常用的选项包括data、methods、computed、 watch等。相比于选项式API，组合式API是将组件中的数据、方法、计算属性、侦听器等代码全部组合在一起，写在setup()函数中。

2.注册组件

简介：当在Vue项目中定义了一个新的组件后，要想在其他组件中引用这个新的组件，需要对新的组件进行注册。Vue提供了两种注册组件的方式，分别是全局注册和局部注册。

1）全局注册

简介：如果某个组件的使用频率很高，许多组件中都会引用该组件，则推荐将该组件全局注册。被全局注册的组件可以在当前Vue项目的任何一个组件内引用。

在Vue项目的src\main.js文件中，通过Vue应用实例的component()方法可以全局注册组件。

用法：

component('组件名称', 需要被注册的组件)

在src\main.js文件中注册一个全局组件MyComponent，示例代码如下：

import { createApp } from 'vue';
import './style.css'
import App from './App.vue'
import MyComponent from 
'./components/MyComponent.vue'
const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')

component()方法支持链式调用，可以连续注册多个组件，示例代码如下：

app.component('ComponentA', ComponentA)
.component('ComponentB', ComponentB)
.component('ComponentC', ComponentC)

2）局部注册

简介：如果某些组件只在特定的情况下被用到，推荐进行局部注册。局部注册即在

某个组件中注册，被局部注册的组件只能在当前注册范围内使用。

用法：

<script>
import ComponentA from './ComponentA.vue'
export default {
components: { ComponentA: ComponentA }
}
</script>

3.父组件向子组件传递数据

简介：若想实现父组件向子组件传递数据，需要先在子组件中声明props，表示子组件可以从父组件中接收哪些数据。

1）声明props

用法：

<script setup>
const props = defineProps({'自定义属性A': 类型}, {'自定义属性B': 类型})
</script>

在组件中声明了props后，可以直接在模板中输出每个prop的值，语法格式如下：

<template> 
{{ 自定义属性A }}
{{ 自定义属性B }}
</template>

2）静态绑定props

创建src\components\Count.vue文件，用于展示子组件的相关内容

<template>
初始值为：{{ num }}
</template>
<script setup>
const props = defineProps({num: String})
</script>

创建src\components\Props.vue文件，用于展示父组件的相关内容

<template>
<Count num="1" />
</template>
<script setup>
import Count from './Count.vue'
</script>

4.动态组件

简介：利用动态组件可以动态切换页面中显示的组件。使用<component>标签可以定义动态组件。

用法：

<component is="要渲染的组件"></component>

上述语法格式中，<component>标签必须配合is属性一起使用，is属性的属性值表示要渲染的组件，当该属性值发生变化时，页面中渲染的组件也会发生变化。is属性的属性值可以是字符串或组件，当属性值为组件时，如果要实现组件的切换，需要调用shallowRef()函数定义响应式数据，将组件保存为响应式数据。shallowRef()函数只处理对象最外层属性的响应，它比ref()函数更适合于将组件保存为响应式数据。

创建src\components\MyLeft.vue文件。

<template>MyLeft组件</template>

创建src\components\MyRight.vue文件。

<template>MyRight组件</template>

创建src\components\DynamicComponent.vue文件，在该文件中导入并使用MyLeft和MyRight组件，实现单击按钮时动态切换组件的效果。

<template>
<button @click="showComponent = MyLeft">展示MyLeft组件</button>
<button @click="showComponent = MyRight">展示MyRight组件</button>
<div><component :is="showComponent"></component></div>
</template>
<script setup >
import MyLeft from './MyLeft.vue'
import MyRight from './MyRight.vue'
import { shallowRef } from 'vue'
const showComponent = shallowRef(MyLeft)
</script>

5.插槽

简介：插槽

是指开发者在封装组件时不确定的、希望由组件的使用者指定的部分。也就是说，插槽是组件封装期间为组件的使用者预留的占位符，允许组件的使用者在组件内展示特定的内容。通过插槽，可以使组件更灵活、更具有可复用性。插槽需要定义后才能使用，下面对定义插槽和使用插槽分别进行讲解。

1）定义插槽

简介：在封装组件时，可以通过<slot>标签定义插槽，从而在组件中预留占位符。假设项目中有一

个MyButton组件，在MyButton组件中定义插槽的示例代码如下。

<template>
<button>
<slot></slot>
</button>
</template>

在<slot>标签内可以添加一些内容作为插槽的默认内容。如果组件的使用者没有为插槽提供任何内容，则默认内容生效；如果组件的使用者为插槽提供了插槽内容，则该插槽内容会取代默认内容。

2）使用插槽

创建src\components\SlotSubComponent.vue文件，用于展示子组件的相关内容。

<template>
<div>测试插槽的组件</div>
<slot></slot>
</template>

创建src\components\MySlot.vue文件，用于展示插槽的相关内容。

<template>
父组件-----{{ message }}
<hr>
<SlotSubComponent>
<p>{{ message }}</p>
</SlotSubComponent>
</template>
<script setup>
import SlotSubComponent from './SlotSubComponent.vue'
const message = '这是组件的使用者自定义的内容'
</script>

3）具名插槽

简介：在Vue中当需要定义多个插槽时，可以通过具名插槽来区分不同的插槽。具名插槽是给每一个插槽定义一个名称，这样就可以在对应名称的插槽中提供对应的数据了。

插槽通过<slot>标签来定义，<slot>标签有一个name属性，用于给各个插槽分配唯一的名

称，以确定每一处要渲染的内容。添加name属性的<slot>标签可用来定义具名插槽。

用法：

<slot name="插槽名称"></slot>

在父组件中，如果要把内容填充到指定名称的插槽中，可以通过一个包含v-slot指令的<template>标签来实现，语法格式如下。

<组件名>
<template v-slot:插槽名称></template>
</组件名>

6.自定义指令（就是函数、方法在Vue里的叫法）

用法：使用setup语法糖，任何以“v”开头的驼峰式命名的变量都可以被用作一个自定义指令，示例代码如下。

<template>
<span v-color></span>
</template>
<script setup>
const vColor = { }
</script>

四：路由

1.路由介绍

简介：路由是指路由器从一个接口接收到数据，根据数据的目的地址将数据定向传送到另一个接口的行为和动作；而路由器是执行行为和动作的硬件设备，主要用于连接网络，实现不同网络之间的通信和数据传递。

1）后端路由：

简介：后端路由的整个过程发生在服务器端，开发者需要在服务器端程序中建立一套后端路由规则。当服务器接收到请求后，会通过路由寻找当前请求的URL地址对应的处理程序。

2）前端路由：

前端路由的整个过程发生在浏览器端，其特点是当URL地址改变时不需要向服务器发起一个加载新页面的请求，而是在维持当前页面的情况下切换页面中显示的内容。

2.路由安装

在Vue 3项目中演示Vue Router的安装

yarn add vue-router@4 --save

3.路由的基本使用

①定义路由组件

在src\components目录下创建Home.vue文件和About.vue文件。

Home.vue文件

<template>
<div class="home-container">
<h3>Home组件</h3>
</div>
</template>

About.vue文件

<template>
<div class="about-container">
<h3>About组件</h3>
</div>
</template>

②定义路由链接和路由视图

简介：使用<router-view>标签定义路由视图，该标签会被渲染成当前路由对应的组件。通过

<router-link>标签定义路由链接方便在不同组件之间切换。

<template>
<div class="app-container">
<h1>App根组件</h1>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<hr>
<router-view></router-view>
</div>
</template>

③创建路由模块

在src目录下创建router.js文件作为路由模块，并在该文件中导入路由相关函数。

import { createRouter, createWebHashHistory } from 'vue-router'

在router.js文件中创建路由实例对象。

const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/home', component: () => import('./components/Home.vue') },
{ path: '/about', component: () => import('./components/About.vue') },
]
})

在router.js文件中导出路由实例对象

export default router

④导入并挂载路由模块

在src\main.js文件中导入并挂载路由模块。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router.js' // 导入路由模块
const app = createApp(App)
app.use(router) // 挂载路由模块
app.mount('#app')

4.路由重定向

修改src\router.js文件，实现当用户访问“/”路径时，将路由重定向到“/home”路径。

const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: import ('./components/Home.vue') },
{ path: '/about', component: import('./components/About.vue') }
]
})

5.嵌套路由

简介：嵌套路由是指通过路由实现组件的嵌套展示，它主要由页面结构决定。实际项目中的应用界面通常由多层嵌套的组件组合而成，为了使多层嵌套的组件能够通过路由访问，路由也需要具有嵌套关系，也就是在路由里面嵌套它的子路由。

用法：

在src\router.js文件的路由匹配规则中通过children属性定义子路由匹配规则。

routes: [
{
path: '父路由路径', 
component: 父组件,
children: [
{ path: '子路由路径1', component: 子组件1 },
{ path: '子路由路径2', component: 子组件2 }
]
}
]

在组件中定义子路由链接的语法格式如下。

<router-link to="/父路由路径/子路由路径"></router-link>

1）嵌套路由的实现

①在src\components目录下创建pages目录，用于存放子路由组件。

②创建src\components\pages\Tab1.vue文件。

<template>
<div>Tab1组件</div>
</template>
<style scoped>
div {
text-align: left;
background-color: #9dc4e5;
}
</style>

③创建src\components\pages\Tab2.vue文件。

<template>
<div>Tab2组件</div>
</template>
<style scoped>
div {
text-align: left;
background-color: #ffba00;
}
</style>

④在component\About.vue文件中添加子路由链接和子路由视图。

<template>
<div class="about-container">
<h3>About组件</h3>
<router-link to="/about/tab1">tab1</router-link>
<router-link to="/about/tab2">tab2</router-link>
<hr>
<router-view></router-view>
</div>
</template>

⑤修改src\router.js文件，在routes中导入Tab1组件和Tab2组件，并使用children属性定义子路由匹配规则。

routes: [
{ path: '/', redirect: '/about' },
{ path: '/home', component: () => import ('./components/Home.vue') },
{
path: '/about', component: () => import('./components/About.vue'),
children: [
{ path: 'tab1', component: () => import ('./components/pages/Tab1.vue') },
{ path: 'tab2', component: () => import ('./components/pages/Tab2.vue') }]
}]

6.动态路由

简介：动态路由是一种路径不固定的路由，路径中可变的部分被称为动态路径参数（Dynamic Segment），使用动态路径参数可以提高路由规则的可复用性。在Vue Router的路由路径中，使用“:参数名”的方式可以在路径中定义动-态路径参数。

用法：

{ path: '/sub/:id', component: 组件 },

7.命名路由

使用命名路由的语法格式如下。

{ path: '路由路径', name: '路由名称', component: 组件 }

在<router-link>标签中使用命名路由时，需要动态绑定to属性的值为对象。当使用对象作为to

属性的值时，to前面要加一个冒号，表示使用v-bind指令进行绑定。在对象中，通过name属

性指定要跳转到的路由名称，使用params属性指定跳转时携带的路由参数，语法格式如下。

{ path: '路由路径', name: '路由名称', component: 组件 }

如何使用命名路由

①在src\components\Home.vue文件中的<router-link>标签中动态绑定to 属性的值，指定要跳转到的路由名称，并传递参数。

<template>
<div class="home-container">
<h3>Home组件</h3>
<router-link :to="{ name: 'MovieDetails', params: { id: 3 } }">跳转到
MovieDetails组件</router-link>
</div>
</template>

②在src\router.js文件中，将“:id”路径的路由名称定义为MovieDetails。

{ path: ':id', name: 'MovieDetails', component: () => import 
('./components/movieDetails.vue'), props: true }

五.Pinia

简介：Pinia是新一代的轻量级状态管理库，它允许跨组件或页面共享状态，解决了多组件间的数据通信，使数据操作更加简洁。

1.安装pinia

# 使用yarn包管理器安装

yarn add pinia --save

# 使用npm包管理器安装

npm install pinia --save

在my-pinia目录下使用yarn安装Pinia。

yarn add pinia@2.0.27 --save

2.使用pinia

简介：在项目中使用Pinia时，通常先在项目中创建一个store模块，然后创建并挂载Pinia实例。其中，store模块是用于管理状态数据的仓库。

①编写store模块，创建src\store\index.js文件。

import { defineStore } from 'pinia'
export const useStore = 
defineStore('storeId', {
state: () => {},
getters: {},
actions: {}
})

② 在src\main.js文件中创建并挂载Pinia实例。

import { createApp } from 'vue'
import './style.css'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
const pinia = createPinia() // 创建Pinia实例
app.use(pinia) // 导入Pinia实例
app.mount('#app')

六.Vue编程题

1.请使用v-for完成水果列表的渲染，效果如图2-1所示。

答：

①创建一个新的Vue 3项目，具体命令如下。

yarn create vite fruit ---template vue
cd fruite
yarn
yarn dev

②使用vscode打开fruit目录

③删除src/style.css中所有代码

④创建src\components\List.vue文件

<template>
<div>
<p>水果列表</p>
<ul>
<li v-for="item in list":key="item.id">
水果编号：{{item.id}}---水果名称：{{item.name}}---水果信息：{{item.info}}
</li>
</ul>
</div>
</template>
<script setup>
import {reactive} from vue
const list =reactive([{id:1,name:'Pingguo',info:'red'},{id:2,name:'ningmeng',info:'yellow'}])
</script>

⑤ 修改src\main.js文件，切换页面中显示的组件，具体代码如下。

import App from './components/List.vue'

2.请实现一个比较2个数大小的页面，当输入2个数字后，单击“比较”按钮后自动比较这2个数的大小，页面效果参考图3-1。比较数字大小结果显示的页面效果参考图3-2。

答：

①创建一个新的Vue 3项目，具体命令如下。

yarn create vite compare ---template vue
cd compare
yarn
yarn dev

②使用vscode打开fruit目录

③删除src/style.css中所有代码

④创建src\components\compare.vue文件

<template>
<text>请输入第1个数字：</text>
<input type='number' @input=num1Input>
<text>请输入第2个数字：</text>
<input type='number' @input=num2Input>
<button @click='compare'>比较</button>
<div>
<text v-if="result">比较结果：{{ result }}</text>
</div>
</template>
<script setup>
import {ref} from 'vue'
const result=ref('')
const num1=ref(0)
const num2=ref(0)
const num1Input=(event)=>{
num1.value=Number(event.traget.value)
}
const num2Input=(event)=>{
num2.value=Number(event.traget.value)
}
const compare=()=>{
 if(num1>num2){
 result.value='数字一大于数字二'
 }else if（num1<num2）{
 result.value='数字一小于数字二'
 }else{
 result.value='数字一等于数字二'
 }
}
</script>

⑤修改src\main.js文件，切换页面中显示的组件，具体代码如下。

import App from './components/compare.vue'

3.请编写登录页面和注册页面，通过动态组件实现动态切换页面中显示的组件，效果如图4-1和图4-2所示。

4.1

4.2

答：

①创建一个新的Vue 3项目，具体命令如下。

yarn create vite LoginOrRe ---template vue
cd compare
yarn
yarn dev

②使用vscode打开LoginOrRe目录

③删除src/style.css中所有代码

④创建src\components\Login.vue文件。

<template>
登录
</template>

⑤创建src\components\Re.vue文件。

<template>
注册
</template>

⑥创建src\components\Index.vue文件，具体代码如下。

<template>
<button @click="show=Login">登录</button>
<button @click="show=Re">注册</button>
<div>
<component:is="show"></component>
</div>
</template>
<script setup>
import Login from './Login.vue'
import Re from './Re.vue'
import { shallowRef } from 'vue'
const show=shallowRef(Login)
</script>

⑦修改src\main.js文件，切换页面中显示的组件，具体代码如下。

import App from './components/Index.vue'

4.路由编程题：使用编程式导航实现页面的跳转，当单击按钮时，跳转到另一个组件中，并携带传递的参数。

①创建一个新的Vue 3项目，具体命令如下。

yarn create vite router --template vue
cd router
yarn
yarn dev

② 下载route

yarn add vue-router@4 --save

③使用VS Code编辑器打开router目录

④删除src/style.css中所有代码

⑤在src/components目录下创建UserXinXi.vue。

<template>
<div>
<h1>用户信息<h1>
<p>用户id：{{user.id}}</p>
<p>用户姓名：{{user.name}}</p>
<p>用户邮箱：{{user.email}}</p>
</div>
</template>
<script setup>
import {computed} from 'vue'
const props = defineProps({
 id: {
 type: Number,
 required: true
 }
})
const user=computed(()=>{
 return{
  id:props.id,
  name:'赵立波',
  emali:'zhaolibo@qq.com'
  }
})
</script>

⑥在src/components目录下创建User.vue。

<template>
<div>
<h1>User组件<h1>
<button @click="gotoUserXinXi">前往用户信息界面</button>
</div>
</template>
<script setup>
import {useRouter} from 'vue'
import {reactive} from 'vue'
const router = useRouter()
const user=reactive(
{id:1,name:''赵立波,email:'zhaolibo@qq.com'}
)
const gotoUserXinXi =()=>{
router.push({
 name:'UserXinXi',
 params:{id,user.id},
 jquery:{
  name:user.name,email:user.email
  }
})
}
</script>

⑦ 创建路由模块，在src目录下创建router.js文件作为路由模块，router.js具体命令如下。

import{createRouter,createWebHashHistory} from 'vue-router'
const router=createRouter({
 history:createWebHashHistory(),
 routes:[
  {path:'/',redirect:'/user'},
  {
   path:'/user',name:'User',component:()=>import('./components/User.vue')
  },
   {
   path:'/user',name:'UserXinXi',component:()=>import('./components/UserXinXi.vue'),props:true
   }
]
}
)
export default router

⑧在src\main.js文件中导入并挂载路由模块，具体代码如下。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router.js'
const app = createApp(App)
app.use(router)
app.mount('#app')

5. 请使用Pinia实现年龄的持久化存储，在页面中显示年龄初始值为20，单击“年龄+”按钮，年龄值会每次自增1，刷新浏览器后，显示修改后的年龄值。

①创建一个新的Vue 3项目，具体命令如下。

yarn create vite pinia --template vue
cd router
yarn
yarn dev

②在age-pinia目录下使用yarn安装pinia，具体命令如下。

yarn add pinia@2.0.27 --save
yarn add pinia-plugin-persist@1.0.0 --save

③使用VS Code编辑器打开pinia目录。

④在src\main.js文件中创建并挂载Pinia实例和pinia-plugin-persist插件，具体代码如下。

import { createApp } from 'vue'
import './style.css'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
import App from './App.vue'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
const app = createApp(App)
app.use(pinia)
app.mount('#app')

⑤创建创建src\store\index.js文件，编写store模块的代码。

import {defineStore} from 'pinia'
export const useStore = defineStore('storeId',{
  state:()=>{
   return{add:20} 
  },
actions:{increase(){this.add++}},
persist:{enabled:true,strategies:[{key:'user',storage:localStorage}]}
})
export default useStore

⑥清空src\App.vue文件中的内容，重新编写如下代码。

<template>
<p>
<button @click="changeAge">年龄增加</button>
年龄：{{add}}
</p>
</template>
<script setup>
import {useStore} from './store/index.js'
import {storeToRefs} from 'pinia'
const store =useStore()
const {add}=storeToRefs(store)
const changeAge=()=>{
 store.increase()
}
</script>

感谢观看