vue3.0 routing meta information (title, routing effects)

vue3.0 routing meta information

Add title to each route

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

use

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

Effect

routing effects

• download:yarn add animate.css
• use
  • App.vue introduction
    • 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.view

<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>

Effect

• When switching routes, the page slides out from the left