vue3简单路由拦截，登录跳转问题

最近使用vue3，简单的实现了router未登录拦截，登录跳转的问题
router的配置基本不变

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
router.beforeEach((to,from,next)=>{
  let username = localStorage.getItem('username');//这里根据自己项目的实际情况添加是否登录的判断条件
  if (to.name !== 'login' && !username) next({ name: 'login',query: { redirect: to.fullPath }})
  else next()
})

主要说明的是vue3中的setup，它是执行在vue实例渲染之前的，因此在setup中不能使用this,但是我们登录之后需要进行路由跳转，因此我们需要导入router 去使用`

  import {ref} from 'vue'
  import {useRouter} from 'vue-router'//导入vue-router
  export default {
    props:['redirect'],
    setup(props) {
      console.log(props);
      const username = ref('');
      const password = ref('');
      const router = useRouter();//使用router
      const onSubmit = (values) => {
        console.log('submit', values);
        localStorage.setItem('username',values.username);
        //路由跳转 router.currentRoute.value.query.redirect 获取需要登陆的页面
        router.push(router.currentRoute.value.query.redirect)
      };
      console.log(router.currentRoute.value.query.redirect);
      return {
        username,
        password,
        onSubmit,
      };
    }
  }