背景
最近加入了一个新部门，这边主要是做项目的，要求的就是快速交付，而且这边的后端也是写界面的，所以这边项目的前端都是使用的RuoYi-Vue这个前后端分离的框架开发的。
官网地址：https://doc.ruoyi.vip/ruoyi-vue/
这几天也参与了其中一个项目，就学习了一下这个项目框架，虽然我也搭建过框架， 但是还是学到了很多之前不知道的，于是就顺便输出自己的学习感悟。
token失效跳转到login界面后登录成功回到原来的界面
思路：可以在跳转到login的时候，加上query参数，等登录成功后，跳到query对应的路由地址。
示例：
router.push(`/login?redirect=${xxx}`)
// 在login.vue页面获取redirect
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
},
// 登录成功后
this.$router.push({ path: this.redirect || "/" })
全局守卫不需要写在router/index里面
可以单独写，然后在main.js中引入即可。
//main.js
import './permission' // permission control
// router/index
// 只写路由相关内容
// permission.js
// 只写router.beforeEach， router.afterEach
vue-meta的组件
有一个vue-meta的组件，可以统一管理vue项目的html的meta信息
官网：https://vue-meta.nuxtjs.org/
<!--App.vue-->
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
metaInfo() {
return {
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
titleTemplate: title => {
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
}
}
}
}
</script>
但是，多余我们一般的项目，只需要在全局守卫中设置document.title就可以了。
然而，vue-meta 提供了更为灵活和功能更丰富的方式来管理页面的 meta 数据，尤其在复杂的单页应用中或者需要更精细的控制时，它的优势就会更加明显：
- 灵活性和可扩展性：
vue-meta不仅可以动态修改页面标题，还可以管理其他的 meta 标签，比如描述、关键字、Open Graph 标签等。这使得你能够更细致地控制页面的 SEO 和社交分享效果。 - 组件级别控制： 使用
vue-meta，你可以在每个组件中定义独立的 meta 信息，这样就能够根据页面的内容动态地设置相应的 meta 数据。这种组件级别的控制可以使得你的代码更具可维护性和可扩展性。 - SSR（服务端渲染）支持：
vue-meta提供了对服务端渲染的支持，能够在服务器端生成带有正确 meta 信息的 HTML，从而提升页面在搜索引擎中的排名和可发现性。 - 异步数据处理： 有些情况下，页面的 meta 数据可能需要根据异步获取的数据来动态设置，这时候
vue-meta提供了便捷的方法来处理这种场景，而直接在全局路由守卫中设置document.title则可能不够灵活。