目录

三、路由

3.1. 【对路由的理解】

3.2. 【基本切换效果】

3.3. 【两个注意点】

3.4.【路由器工作模式】

3.5. 【to的两种写法】

3.6. 【命名路由】

3.7. 【嵌套路由】

3.8. 【路由传参】

query参数

params参数

3.9. 【路由的props配置】

3.10. 【 replace属性】

3.11. 【编程式导航】

3.12. 【重定向】

四、pinia

4.1【准备一个效果】

4.2【搭建 pinia 环境】

4.3【存储+读取数据】

4.4.【修改数据】(三种方式)

4.5.【storeToRefs】

4.6.【getters】

4.7.【$subscribe】

4.8. 【store组合式写法】

三、路由

3.1. 【对路由的理解】

3.2. 【基本切换效果】

  • Vue3中要使用vue-router的最新版本，目前是4版本。

  • 路由配置文件代码如下：

import {createRouter,createWebHistory} from 'vue-router'import Home from '@/pages/Home.vue'import News from '@/pages/News.vue'import About from '@/pages/About.vue'const router = createRouter({history:createWebHistory(),routes:[{path:'/home',component:Home},{path:'/about',component:About}]})export default router
  • main.ts代码如下：
import router from './router/index'app.use(router) # 使用你创建的路由器app.mount('#app')
  • App.vue代码如下
Vue路由测试
首页新闻关于import {RouterLink,RouterView} from 'vue-router'

3.3. 【两个注意点】

  1. 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。

  2. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

3.4.【路由器工作模式】

history模式

优点：URL更加美观，不带有#，更接近传统的网站URL。

缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

const router = createRouter({history:createWebHistory(), //history模式/******/})

hash模式

优点：兼容性更好，因为不需要服务器端处理路径。

缺点：URL带有#不太美观，且在SEO优化方面相对较差。

const router = createRouter({history:createWebHashHistory(), //hash模式/******/})

3.5. 【to的两种写法】

主页Home

3.6. 【命名路由】

作用：可以简化路由跳转及传参（后面就讲）。

给路由规则命名：

routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,},{name:'guanyu',path:'/about',component:About}]

跳转路由：

跳转跳转

3.7. 【嵌套路由】

1、编写News的子路由：Detail.vue

2、配置路由规则，使用children配置项：

const router = createRouter({history:createWebHistory(),routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail',component:Detail}]},{name:'guanyu',path:'/about',component:About}]})export default router

3、跳转路由（记得要加完整路径）：

xxxxxxxx

4、记得去Home组件中预留一个

3.8. 【路由传参】

query参数

传递参数

跳转{{news.title}}

接收参数

import {useRoute} from 'vue-router'const route = useRoute()// 打印query参数console.log(route.query)

params参数

传递参数

{{news.title}}{{news.title}}

接收参数

import {useRoute} from 'vue-router'const route = useRoute()// 打印params参数console.log(route.params)

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

备注2：传递params参数时，需要提前在规则中占位

备注3：传递params参数时，不能传对象和数组

注意：如果占位方式传参，可以设置不是必传，那就需要在路由路径加问号，比如我content想可传可不传，那就把路由路径 path:’detail/:id/:title/:content?’

3.9. 【路由的props配置】

作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

{name:'xiang',path:'detail/:id/:title/:content',component:Detail,// props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件// props:{a:1,b:2,c:3}, // props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件// props:true// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件props(route){return route.query}}

接收参数

defineProps(['id','title','content'])

3.10. 【 replace属性】

  1. 作用：控制路由跳转时操作浏览器历史记录的模式。

  2. 浏览器的历史记录有两种写入方式：分别为push和replace：

    • push是追加历史记录（默认值）。

    • replace是替换当前记录。

  3. 开启replace模式：

News

3.11. 【编程式导航】

路由组件的两个重要的属性：$route和$router变成了两个hooks

import {useRoute,useRouter} from 'vue-router'const route = useRoute()const router = useRouter()console.log(route.query)console.log(route.parmas)console.log(router.push)console.log(router.replace)

例如：

function showNewsDetail(news: any) {router.push({name: 'xiang',query: {id: news.idtitle: news.title,content: news.content}})}

3.12. 【重定向】

  1. 作用：将特定的路径，重新定向到已有路由。

  2. 具体编码：

{path:'/',redirect:'/about'}

四、pinia

集中式状态（数据）管理，vue2是vuex，vue3是pinia。

4.1【准备一个效果】

4.2【搭建 pinia 环境】

第一步：npm install pinia

第二步：操作src/main.ts

import { createApp } from 'vue'import App from './App.vue'/* 引入createPinia，用于创建pinia */import { createPinia } from 'pinia'/* 创建pinia */const pinia = createPinia()const app = createApp(App)/* 使用插件 */{}app.use(pinia)app.mount('#app')

此时开发者工具中已经有了pinia选项

4.3【存储+读取数据】

1、Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。

2、它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。

3、具体编码：src/store/count.ts

// 引入defineStore用于创建storeimport {defineStore} from 'pinia'// 定义并暴露一个storeexport const useCountStore = defineStore('count',{// 动作actions:{},// 状态state(){return {sum:6}},// 计算getters:{}})

4、具体编码：src/store/talk.ts

// 引入defineStore用于创建storeimport {defineStore} from 'pinia'// 定义并暴露一个storeexport const useTalkStore = defineStore('talk',{// 动作actions:{},// 状态state(){return {talkList:[{id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'}, {id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},{id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}]}},// 计算getters:{}})

5、组件中使用state中的数据

当前求和为：{{ sumStore.sum }}
// 引入对应的useXxxxxStoreimport {useSumStore} from '@/store/sum'// 调用useXxxxxStore得到对应的storeconst sumStore = useSumStore()
  • {{ talk.content }}
import axios from 'axios'import {useTalkStore} from '@/store/talk'const talkStore = useTalkStore()

4.4.【修改数据】(三种方式)

1、第一种修改方式，直接修改

countStore.sum = 666

2、第二种修改方式：批量修改

countStore.$patch({sum:999,school:'atguigu'})

3、第三种修改方式：借助action修改（action中可以编写一些业务逻辑）

import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {/*************/actions: {//加increment(value:number) {if (this.sum  1){this.sum -= value}}},/*************/})

组件中调用action即可

// 使用countStoreconst countStore = useCountStore()// 调用对应actioncountStore.incrementOdd(n.value)

4.5.【storeToRefs】

  • 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。

  • 注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据包括方法。

当前求和为：{{sum}}
import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs转换countStore，随后解构 */const {sum} = storeToRefs(countStore)

4.6.【getters】

1、概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。

2、追加getters配置。

// 引入defineStore用于创建storeimport {defineStore} from 'pinia'// 定义并暴露一个storeexport const useCountStore = defineStore('count',{// 动作actions:{/************/},// 状态state(){return {sum:1,school:'atguigu'}},// 计算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}}})

3、组件中读取数据：

const {increment,decrement} = countStorelet {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

4.7.【$subscribe】

通过 store 的 $subscribe() 方法侦听 state 及其变化

talkStore.$subscribe((mutate,state)=>{console.log('LoveTalk',mutate,state)localStorage.setItem('talk',JSON.stringify(talkList.value))})

4.8. 【store组合式写法】

import {defineStore} from 'pinia'import axios from 'axios'import {nanoid} from 'nanoid'import {reactive} from 'vue'export const useTalkStore = defineStore('talk',()=>{// talkList就是stateconst talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])// getATalk函数相当于actionasync function getATalk(){// 发请求，下面这行的写法是：连续解构赋值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串，包装成一个对象let obj = {id:nanoid(),title}// 放到数组中talkList.unshift(obj)}return {talkList,getATalk}})