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(){} )