本文详细介绍了Vue3中的路由配置、路由组件的使用、参数传递方法（query和params）、命名路由、嵌套路由、props配置、replace属性、编程式导航以及Pinia状态管理的基础设置，包括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 routermain.ts代码如下：
import router from './router/index'
app.use(router) # 使用你创建的路由器
app.mount('#app')App.vue代码如下
<template>
<div class="app">
<h2 class="title">Vue路由测试</h2>
<!-- 导航区 -->
<div class="navigate">
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/news" active-class="active">新闻</RouterLink>
<RouterLink to="/about" active-class="active">关于</RouterLink>
</div>
<!-- 展示区 -->
<div class="main-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script lang="ts" setup name="App">
import {RouterLink,RouterView} from 'vue-router'
</script>3.3. 【两个注意点】
路由组件通常存放在
pages或views文件夹，一般组件通常存放在components文件夹。通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。
3.4.【路由器工作模式】
history模式
优点：
URL更加美观，不带有#，更接近传统的网站URL。缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有
404错误。const router = createRouter({ history:createWebHistory(), //history模式 /******/ })
hash模式
优点：兼容性更好，因为不需要服务器端处理路径。
缺点：
URL带有#不太美观，且在SEO优化方面相对较差。const router = createRouter({ history:createWebHashHistory(), //hash模式 /******/ })
3.5. 【to的两种写法】
<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>
<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>3.6. 【命名路由】
作用：可以简化路由跳转及传参（后面就讲）。
给路由规则命名：
routes:[
{
name:'zhuye',
path:'/home',
component:Home
},
{
name:'xinwen',
path:'/news',
component:News,
},
{
name:'guanyu',
path:'/about',
component:About
}
]跳转路由：
<!--简化前：需要写完整的路径（to的字符串写法） -->
<router-link to="/news/detail">跳转</router-link>
<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<router-link :to="{name:'guanyu'}">跳转</router-link>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 router3、跳转路由（记得要加完整路径）：
<router-link to="/news/detail">xxxx</router-link>
<!-- 或 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>4、记得去Home组件中预留一个<router-view>
<template>
<div class="news">
<nav class="news-list">
<RouterLink v-for="news in newsList" :key="news.id" :to="{path:'/news/detail'}">
{{news.name}}
</RouterLink>
</nav>
<div class="news-detail">
<RouterView/>
</div>
</div>
</template>3.8. 【路由传参】
query参数
传递参数
<!-- 跳转并携带query参数（to的字符串写法） -->
<router-link to="/news/detail?a=1&b=2&content=欢迎你">
跳转
</router-link>
<!-- 跳转并携带query参数（to的对象写法） -->
<RouterLink
:to="{
//name:'xiang', //用name也可以跳转
path:'/news/detail',
query:{
id:news.id,
title:news.title,
content:news.content
}
}"
>
{{news.title}}
</RouterLink>接收参数
import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)params参数
传递参数
<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink
:to="{
name:'xiang', //用name跳转
params:{
id:news.id,
title:news.title,
content:news.title
}
}"
>
{{news.title}}
</RouterLink>接收参数
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属性】
-
作用：控制路由跳转时操作浏览器历史记录的模式。
-
浏览器的历史记录有两种写入方式：分别为
push和replace：-
push是追加历史记录（默认值）。 -
replace是替换当前记录。
-
-
开启
replace模式：
<RouterLink replace .......>News</RouterLink>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.id
title: news.title,
content: news.content
}
})
}3.12. 【重定向】
-
作用：将特定的路径，重新定向到已有路由。
-
具体编码：
{
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用于创建store
import {defineStore} from 'pinia'
// 定义并暴露一个store
export const useCountStore = defineStore('count',{
// 动作
actions:{},
// 状态
state(){
return {
sum:6
}
},
// 计算
getters:{}
})4、具体编码：src/store/talk.ts
// 引入defineStore用于创建store
import {defineStore} from 'pinia'
// 定义并暴露一个store
export const useTalkStore = defineStore('talk',{
// 动作
actions:{},
// 状态
state(){
return {
talkList:[
{id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},
{id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},
{id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}
]
}
},
// 计算
getters:{}
})5、组件中使用state中的数据
<template>
<h2>当前求和为：{{ sumStore.sum }}</h2>
</template>
<script setup lang="ts" name="Count">
// 引入对应的useXxxxxStore
import {useSumStore} from '@/store/sum'
// 调用useXxxxxStore得到对应的store
const sumStore = useSumStore()
</script><template>
<ul>
<li v-for="talk in talkStore.talkList" :key="talk.id">
{{ talk.content }}
</li>
</ul>
</template>
<script setup lang="ts" name="Count">
import axios from 'axios'
import {useTalkStore} from '@/store/talk'
const talkStore = useTalkStore()
</script>4.4.【修改数据】(三种方式)
1、第一种修改方式，直接修改
countStore.sum = 6662、第二种修改方式：批量修改
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 < 10) {
//操作countStore中的sum
this.sum += value
}
},
//减
decrement(value:number){
if(this.sum > 1){
this.sum -= value
}
}
},
/*************/
})组件中调用action即可
// 使用countStore
const countStore = useCountStore()
// 调用对应action
countStore.incrementOdd(n.value)4.5.【storeToRefs】
-
借助
storeToRefs将store中的数据转为ref对象，方便在模板中使用。 -
注意：
pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据包括方法。
<template>
<div class="count">
<h2>当前求和为：{{sum}}</h2>
</div>
</template>
<script setup lang="ts" name="Count">
import { useCountStore } from '@/store/count'
/* 引入storeToRefs */
import { storeToRefs } from 'pinia'
/* 得到countStore */
const countStore = useCountStore()
/* 使用storeToRefs转换countStore，随后解构 */
const {sum} = storeToRefs(countStore)
</script>
4.6.【getters】
1、概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。
2、追加getters配置。
// 引入defineStore用于创建store
import {defineStore} from 'pinia'
// 定义并暴露一个store
export 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} = countStore
let {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就是state
const talkList = reactive(
JSON.parse(localStorage.getItem('talkList') as string) || []
)
// getATalk函数相当于action
async 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}
})
2062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
