Vue3【路由元信息、过渡动效、滚动行为、路由懒加载、动态路由、路由高亮】(十一)-全面详解（学习总结---从入门到深化）(vue路由用法)

Vue3【路由元信息、过渡动效、滚动行为、路由懒加载、动态路由、路由高亮】(十一)-全面详解（学习总结---从入门到深化）

推荐整理分享Vue3【路由元信息、过渡动效、滚动行为、路由懒加载、动态路由、路由高亮】(十一)-全面详解（学习总结---从入门到深化）(vue路由用法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue路由两种方式,vue路由两种方式,vue路由to from next,vue路由用法,vuex路由,vue路由元信息,vue 路由实现原理,vue路由元信息,内容如对您有帮助，希望把文章链接给更多的朋友！

  

👏作者简介：大家好，我是小童，Java开发工程师，CSDN博客博主，Java领域新星创作者 📕系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶 📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀 🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦 🍂博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人

目录

​路由元信息

过渡动效

滚动行为

路由懒加载

动态路由

 路由高亮

---

路由元信息

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等，这些事情可以通过接收属性对象的 meta 属性来实现 定义路由的时候你可以配置 meta 字段,这个 meta 就是路由元信息 

利用 meta 配合导航守卫完成判断用户是否登录在允许打开用户中心页面 

import { createRouter, createWebHistory } from 'vue-router'import HomeView from '../views/HomeView.vue'import UserInfoView from "../views/UserInfoView.vue"import LoginView from "../views/LoginView.vue"const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView }, { path: '/login', name: 'login', component: LoginView }, { path: '/about', name: 'about', component: () => import('../views/AboutView.vue'), meta:{ requiresAuth:false } }, { path: '/userinfo', name: 'userinfo', component: UserInfoView, meta:{ requiresAuth:true } } ]})router.beforeEach((to,from,next) =>{ let token = false; if(to.meta.requiresAuth){ if(!token){ next({ path:"/login" }) }else{ next() } }else{ next() }})export default router过渡动效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API 和 Transition API 

<template> <RouterLink to="/">Home</RouterLink> | <RouterLink to="/about">About</RouterLink> | <RouterLink to="/userinfo">用户中心</RouterLink> <router-view v-slot="{ Component }"> <Transition name="fade" > <component :is="Component"></component> </Transition> </router-view></template><script setup>import { RouterLink, RouterView} from 'vuerouter'</script><style scoped>.fade-enter-active,.fade-leave-active { transition: opacity 0.5s ease;}.fade-enter-from,.fade-leave-to { opacity: 0;}</style><router-view v-slot="{ Component,route }"> <Transition :name="route.meta.transition ? 'fade' : ''" > <component :is="Component"></component> </Transition></router-view>{ path: '/about', name: 'about', component: () => import('../views/AboutView.vue'), meta:{ transition:true }}滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到， 而且更好，它让你可以自定义路由切换时页面如何滚动 

温馨提示

这个功能只在支持 history.pushState 的浏览器中可用 

const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView } ], scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { top: 0 } } }})

 延迟滚动

scrollBehavior (to, from, savedPosition) { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ left: 0, top: 400 }) }, 500) })}路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效 

// 将// import LoginView from "../views/LoginView.vue"// 替换成const LoginView = () => import("../views/LoginView.vue")

 或者

{ path: '/login', name: 'login', component: () => import("../views/LoginView.vue")}动态路由

对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由 

添加路由 

用 router.addRoute() 新增加路由配置

router.addRoute({ path:"/news", name:"News", component:News})

添加多个路由

const currentRouter = [ { path:"/news", name:"News", component:News }, { path: '/about', name: 'about', component:About }]for(let i = 0;i<currentRouter.length;i++){ router.addRoute(currentRouter[i])}

删除路由

通过路由名字进行删除

router.removeRoute("about")

添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数

router.addRoute("News",{ path:"yule", component:Yule}) 路由高亮

在实现导航的时候，我们需要给导航添加高亮

active-class 

链接激活时，应用于渲染的 < a > 的 class

<RouterLink active-class="active" to="/">Home</RouterLink> |<RouterLink active-class="active" to="/about">About</RouterLink>

linkActiveClass

全局配置

const router = createRouter({ linkActiveClass:"active"})

exact-active-class

链接精准激活时，应用于渲染的< a >  的 class

<RouterLink exact-active-class="active" to="/">Home</RouterLink> |<RouterLink exact-active-class="active" to="/about">About</RouterLink>

 linkExactActiveClass

全局配置

const router = createRouter({ linkExactActiveClass:"active"})