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