开发网站代码量,嘉兴网站制作套餐,网站开发语言为,wordpress首页文件夹在 Vue Router 中#xff0c;你可以通过过渡动效#xff08;Transition Effects#xff09;为路由切换添加平滑的过渡效果#xff0c;从而提升用户体验。过渡动效可以使用 Vue 的 transition 组件和 CSS 过渡来实现。
基本使用#xff1a;
对导航使用动画#…在 Vue Router 中你可以通过过渡动效Transition Effects为路由切换添加平滑的过渡效果从而提升用户体验。过渡动效可以使用 Vue 的 transition 组件和 CSS 过渡来实现。
基本使用
对导航使用动画需要 v-slot API router-view #default{route,Component}transition :enter-active-classanimate__animated ${route.meta.transition}component :isComponent/component/transition/router-view以上会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡可以将元信息和动态的 name 结合在一起放在transition 上
declare module vue-router{interface RouteMeta {title:string,transition:string,}
}const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,component: () import(/views/Login.vue),meta:{title:登录页面,transition:animate__fadeInUp,}},{path: /index,component: () import(/views/Index.vue),meta:{title:首页,transition:animate__bounceIn,}}]
})用法总结在路由切换时添加过渡动效 首先你需要在你的 Vue 项目中导入 transition 组件。 在需要添加过渡动效的地方通常是路由的 router-view使用 transition 包裹你的内容。 为 transition 组件添加一个 CSS 类以便在路由切换时触发过渡效果。
实例演示以下实例会用到 Animation.css 库 index.ts
import { createRouter, createWebHistory } from vue-routerdeclare module vue-router {interface RouteMeta {title: string,transition: string}
}export const router createRouter({// import.meta.env.BASE_URL 应用的基本 URL。基本 URL 是指在你的应用部署到某个域名或子路径时URL 的起始部分。例如如果你的应用部署在 https://example.com/myapp/ 这个路径下那么 import.meta.env.BASE_URL 就会是 /myapp/。history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,component: () import(/views/Login.vue),meta: {title: 登录页,transition: animate__fadeIn}},{path: /index,component: () import(/views/Index.vue),meta: {title: 首页,transition: animate__bounceOut}},],
})loadingBar.vue
templatediv classwrapsdiv refbar classbar/div/div
/templatescript setup langts
import { ref, onMounted } from vue
let speed refnumber(1)
let bar refHTMLElement()
let timer refnumber(0)
const startLoading () {speed.value 1let dom bar.value as HTMLElementtimer.value window.requestAnimationFrame(function fn() {if (speed.value 90) {speed.value 1;dom.style.width speed.value %timer.value window.requestAnimationFrame(fn)} else {speed.value 1window.cancelAnimationFrame(timer.value)}})
}
const endLoading () {let dom bar.value as HTMLElementsetTimeout(() {window.requestAnimationFrame(() {speed.value 100dom.style.width speed.value %})}, 500)}defineExpose({ startLoading, endLoading })
/scriptstyle scoped langless
.wraps {width: 100%;position: fixed;height: 10px;top: 0;.bar {height: inherit;width: 0;background-color: #409eff;}
}
/styleIndex.vue
templateh1我进来啦/h1
/templatescript setup langts/scriptstyle scoped/styleLogin.vue
templatediv classloginel-card classbox-cardel-form refform :rulesrules :modelformInline classdemo-form-inlineel-form-item propuser label账号el-input v-modelformInline.user placeholder请输入账号 //el-form-itemel-form-item proppassword label密码el-input v-modelformInline.password placeholder请输入密码 typepassword/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit登录/el-button/el-form-item/el-form/el-card/div
/templatescript setup langts
import { reactive, ref } from vue
import { useRouter } from vue-router
import type { FormItemRule, FormInstance } from element-plus;
import { ElMessage } from element-plusconst router useRouter()
type Form {user: string,password: string
}
type Rules {[k in keyof Form]?: ArrayFormItemRule
}
const formInline reactiveForm({user: ,password: ,
})
const form refFormInstance()
const rules reactive({user: [{required: true,message: 请输入账号,type: string,}],password: [{required: true,message: 请输入密码,type: string,}]
})const onSubmit () {console.log(submit!, form.value)form.value?.validate((validate){if (validate) {router.push(/index)localStorage.setItem(token, 1)} else {ElMessage.error(账号或密码错误)}})}
/scriptstyle scoped langless
.login {height: 100%;display: flex;justify-content: center;align-items: center;
}
/styleApp.vue
templaterouter-view #default{ Component, route }transition :enter-active-classanimate__animated ${route.meta.transition}component :isComponent/component/transition/router-view
/templatescript setup langts
import animate.css/scriptstyle
/* 注意 style 标签 别加 scoped 不然设置宽高不生效 */
* {margin: 0;padding: 0;
}
html, body, #app {height: 100%;overflow: hidden;
}
/stylemain.ts
import { createApp,createVNode,render } from vue
import App from ./App.vue
import {router} from ./router
// import 引入
import ElementPlus from element-plus
import element-plus/dist/index.css
import loadingBar from ./components/loadingBar.vueconst Vnode createVNode(loadingBar)
render(Vnode,document.body)
const app createApp(App)
app.use(router)
// use 注入 ElementPlus 插件
app.use(ElementPlus)const whiteList [/]// beforeEach 可以定义不止一个vue会收集所有定义的路由钩子所以next的作用不应该是跳转而是使步骤进行到下一个你定义的钩子
router.beforeEach((to, from, next) {document.title to.meta.titleVnode.component?.exposed?.startLoading()// token每次都要跟后端校验一下是否过期if(whiteList.includes(to.path) || localStorage.getItem(token)){next()}else{next(/)}
})router.afterEach((to, from) {Vnode.component?.exposed?.endLoading()
})
app.mount(#app)可以发现在切换到首页或者登录页都有过渡动效。
