vue3.0路由 元信息（标题、路由特效）

vue3.0路由 元信息

给每一个路由添加 title

router / index.ts

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/home/Home.vue'
// 定义路由 元信息的 类型
declare module 'vue-router' {
  interface RouteMeta {
    title: string
  }
}

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '',
      redirect: 'login',
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@views/login/Login.vue'),
      meta: {
        title: '登录',
      },
    },
    {
      path: '/reg',
      name: 'Reg',
      component: () => import('@views/reg/Reg.vue'),
      meta: {
        title: '注册',
      },
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        title: '首页',
      },
      children: [],
    },
  ],
})

export default router

使用

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
})

效果

路由特效

• 下载：yarn add animate.css
• 使用
  • App.vue引入
    • import 'animate.css'

router / index.ts

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/home/Home.vue'

// 定义路由 元信息的 类型
declare module 'vue-router' {
  interface RouteMeta {
    title: string
    transition: string
  }
}

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '',
      redirect: 'login',
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@views/login/Login.vue'),
      meta: {
        title: '登录',
        transition: 'animate__fadeInLeft',
      },
    },
    {
      path: '/reg',
      name: 'Reg',
      component: () => import('@views/reg/Reg.vue'),
      meta: {
        title: '注册',
        transition: 'animate__fadeInLeft',
      },
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        title: '首页',
        transition: 'animate__fadeInLeft',
      },
      children: [],
    },
  ],
})

export default router

App.vue

<template>
  <div class="app">
    <router-view #default="{ route, Component }">
      <transition :enter-active-class="`animate__animated ${route.meta?.transition}`">
        <component :is="Component"></component>
      </transition>
    </router-view>
  </div>
</template>
<script setup lang="ts">
import { RouterView } from 'vue-router'
import 'animate.css'
</script>
<style>
@import '@/assets/base.css';
html,
body,
#app,
.app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ccc;
}
</style>

效果

• 就是切换路由的时候，页面从左侧滑动而出