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

👏作者简介：大家好，我是小童，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"
})