vue路由有什么作用（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" })