1.1如何在vuepress2.0中实现登录验证

技术：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>