插画素材网站有哪些,系统管理员权限怎么开,嘉兴营销型网站建设,网站建设多少钱一年目录
三、路由
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.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.vueconst 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代码如下
templatediv classapph2 classtitleVue路由测试/h2!-- 导航区 --div classnavigateRouterLink to/home active-classactive首页/RouterLinkRouterLink to/news active-classactive新闻/RouterLinkRouterLink to/about active-classactive关于/RouterLink/div!-- 展示区 --div classmain-contentRouterView/RouterView/div/div
/templatescript langts setup nameAppimport {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-classactive to/home主页/router-link!-- 第二种to的对象写法 --
router-link active-classactive :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 router
3、跳转路由记得要加完整路径
router-link to/news/detailxxxx/router-link
!-- 或 --
router-link :to{path:/news/detail}xxxx/router-link
4、记得去Home组件中预留一个router-view
templatediv classnewsnav classnews-listRouterLink v-fornews in newsList :keynews.id :to{path:/news/detail}{{news.name}}/RouterLink/navdiv classnews-detailRouterView//div/div
/template 3.8. 【路由传参】
query参数
传递参数
!-- 跳转并携带query参数to的字符串写法 --
router-link to/news/detail?a1b2content欢迎你跳转
/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-routerconst 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. 【重定向】 作用将特定的路径重新定向到已有路由。 具体编码
{path:/,redirect:/about
} 四、pinia
集中式状态数据管理vue2是vuexvue3是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中的数据
templateh2当前求和为{{ sumStore.sum }}/h2
/templatescript setup langts nameCount// 引入对应的useXxxxxStore import {useSumStore} from /store/sum// 调用useXxxxxStore得到对应的storeconst sumStore useSumStore()
/script
templateulli v-fortalk in talkStore.talkList :keytalk.id{{ talk.content }}/li/ul
/templatescript setup langts nameCountimport axios from axiosimport {useTalkStore} from /store/talkconst talkStore useTalkStore()
/script 4.4.【修改数据】(三种方式)
1、第一种修改方式直接修改
countStore.sum 666 2、第二种修改方式批量修改
countStore.$patch({sum:999,school:atguigu
}) 3、第三种修改方式借助action修改action中可以编写一些业务逻辑
import { defineStore } from piniaexport const useCountStore defineStore(count, {/*************/actions: {//加increment(value:number) {if (this.sum 10) {//操作countStore中的sumthis.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中数据包括方法。
templatediv classcounth2当前求和为{{sum}}/h2/div
/templatescript setup langts nameCountimport { useCountStore } from /store/count/* 引入storeToRefs */import { storeToRefs } from pinia/* 得到countStore */const countStore useCountStore()/* 使用storeToRefs转换countStore随后解构 */const {sum} storeToRefs(countStore)
/script4.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 vueexport 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?formatjson)// 把请求回来的字符串包装成一个对象let obj {id:nanoid(),title}// 放到数组中talkList.unshift(obj)}return {talkList,getATalk}
})
