Java整理14
1、vue3路由机制router
npm install router
router.jsimport {createRouter,createWebHashHistory} from 'vue-router'
创建一个路由对象const router = createRouter()
向外暴露routerexport default routerconst router = createRouter({history:createWebHashHistory(), 记录路由历史routers:[ 定义多个不同路径同组件之间的对应关系{path:"/home",component:home 组件名或别名} {}{}......] }）
main.js导入router.jsimport routerconst app=createApp(App)app.use(router)app.mount('#app')App.vue中<div><router-link to="/home">文字</router-link><router-view></router-view></div>router-link帮助改变url中的地址，在任何.vue文件中都行，一个视图上可以同时存在多个router-view且每个router-view都可以设置展示哪个组件，通过name属性。<router-view name="list"></router-view>routes:[{ path:"/home",components:{ name属性名:组件名,default:组件名}//默认其它没有指定router-view的剩余组件展示} ]
2、编程式路由
<button @click="showlist()">list</button>
<script>import {userRouter} from 'vue-router'const router=useRouter()function showlist(){router.Push("路径")或router.Push({path:"路径"}) }
</script>
路由传参：方法一：键值对 ?key=value&key1=value1方法二：路径 /a/b/c
useRoute接受参数import {useRoute} from 'vue-router'let route=useRoute()route.params.idroute.params路径参数route.query键值对参数
声明式传参：<router-link to="/a/b/c"></router-link>const router=createRouter({history:createWebHashHistory(),routers:[{ path:"/a:id/:name"component:组件名}]})
3、路由守卫
全局前置守卫，每次路由切换页面前都会执行beforeEach中的回调函数
router.jsrouter.beforeEach(()=>{} (to,from,next)=>{} //to下一个页面、from上一个页面、next放行方法，只有next执行了才会被放行，next()直接放行，next("/路径")路由重定向)
全局后置守卫router.afterEach(()=>{} (to,from)=>{} //to下一个页面、from上一个页面
)
4、Vue3数据交互Axios
promise(回调函数)
普通函数从上往下一个一个执行 串行
setTimeOut(回调函数，时间_单位毫秒)
回调函数是一种基于事件的自动调用函数，回调函数后面的代码不会等回调函数执行完再执行 并行
Promise 异步
三种状态：（1）Pending 进行中（2）Resolved 已完成（3）Rejected 已失败
<script>let promise=new Promise(function_回调函数(){}) 参数(resolve函数1,reject函数2)（1）在回调函数中如果调用resolve()方法，promise会由pending转态转成resolved（2）在回调函数中如果调用reject()方法，promise会由pending转态转成rejected
promise.then(函数3,函数4)函数3 function(){}当promise由pending转为resolved以后执行的函数4 function(){}当promise由pending转为rejected以后执行的
Async
（1）async，异步组件，用户标识函数的，async函数返回的结果就是一个promiselet promise=new Promise(()=>{})async function aaa(){}
（2）方法如果正常return结果，promise状态就是resolved，return后的结果就是成功状态的返回值
（3）方法中出现了异常则返回的值就是一个失败状态的返回值
（4）async函数返回的结果是一个promise，其状态由内部的promise决定
Await
帮助我们获取promise成功状态的返回值的关键字
（1）await右边是一个普通值，则直接返回普通值，如果右边是一个promise，则返回promise成功状态的结果。
（2）await右边如果是一个失败状态，则会直接抛异常
（3）await必须在async修饰的函数中使用，但async可以没有await
（4）await后面的代码会等await的执行完以后再执行
数据交互Axiosimport axios from 'axios'let promise=axios({请求的参数}) 返回peomise对象请求三要素：（1）请求的url（2）请求的方式（3）请求的参数axios({method:"get",url=" ",data:{若请求方式为get，data中为key=value的形式；若请求方式为post，data中为json形式} })axios简写：axios.get(url,{请求的其它信息})axios.get(url,{params:{键值对参数},header:{ }})
Axios拦截器axios.jsimport axios from 'axios'const instance=axios.create({请求的基础路径baseURL:" " })请求拦截器instance.interceptors.request.use(function(){}function(){} )响应拦截器instance.interceptors.response.use(function(){}function(){} )