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

  

 

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

目录

​路由元信息

过渡动效

滚动行为

路由懒加载

动态路由

 路由高亮


路由元信息

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

有时,你可能希望将任意信息附加到路由上,如过渡名称、谁可以访问路由等,这些事情可以通过接收属性对象的 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

过渡动效

Vue3【路由元信息、过渡动效、滚动行为、路由懒加载、动态路由、路由高亮】(十一)-全面详解(学习总结---从入门到深化)_第2张图片想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用 v-slot API 和 Transition API 




    
        
    
{
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
      meta:{
        transition:true
     }
}

滚动行为

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

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 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)
   })
}

路由懒加载

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

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

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

 或者

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

动态路由

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

对路由的添加通常是通过 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

删除路由

通过路由名字进行删除

router.removeRoute("about")

添加嵌套路由

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

router.addRoute("News",{
  path:"yule",
  component:Yule
})

 路由高亮

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

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

active-class 

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

Home |
About

linkActiveClass

全局配置

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

exact-active-class

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

Home |
About

 linkExactActiveClass

全局配置

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

你可能感兴趣的:(#,Vue3知识体系,前端,javascript,vue.js)