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
- 使用
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>
效果