技术:vuepress2+ts+vue3+antd
思路:利用路由拦截访问用户登陆状态,用户未登录登录跳转到登录页,登录md文件使用login.vue组件,组件内部实现登陆后路由跳转到首页
具体实现:
相对路径:src\.vuepress\client.ts 参见
import { defineClientConfig } from 'vuepress/client'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import { provide } from 'vue'
import { useRouter } from 'vue-router'
export default defineClientConfig({
enhance({ app, router }) {
app.use(Antd)
router.beforeEach((to) => {
// 登录逻辑
})
},
setUp() {
// 可以被布局、页面和其他组件注入
const router = useRouter();
provide('router', router)
}
})
相对路径:src\.vuepress\components\login.vue -- (如果想要在md文件中可以直接使用components下的vue组件需要在src\.vuepress\config.ts文件夹下进行配置见1.2)
<script>
// 这个是对应在client.ts中的setUp的provide('router', router)
import { inject } from 'vue'
export default {
name: 'LOGIN',
setUp() {
// 可以用来实现登陆成功之后的路由跳转
const router = inject('router')
// ...... 一些登陆页面逻辑
}
}
</script>
相对路径:src\login.vue 对应的路由\login
---
home: true // 这个一定要设为true 否则这个页面就会带侧边栏
---
<login></login>