【vue3+ts后台管理】路由守卫和退出登录

【vue3+ts后台管理】路由守卫和退出登录

文章目录

​​首页菜单选中​​​​首页重定向​​​​路由守卫​​​​退出登录​​

首页菜单选中

每次我们刷新页面，左侧菜单都没有选中

修改 HomeView.vue，获取当前页面 path，给 Menu 菜单的​​default-active​​动态赋值，这个值是默认激活菜单的 index

setup() { const router = useRouter() const list = router.getRoutes().filter(value => value.meta.isShow) const route = useRoute() console.log(route.path) return { list, active:route.path } }

这样当我们再刷新页面菜单也会默认选中了

首页重定向

当我们进入首页​​routes: Array = [ { path: '/', name: 'home', redirect:'goods', component: HomeView, children:[ ...... ] }, ......]

这样当我们登录完成进入首页时会重定向到商品列表页

路由守卫

当没有登录时，我们需要跳转到登录页，我们来增加路由守卫，修改 index.ts

......router.beforeEach((to,from,next)=>{ const token:string|null = localStorage.getItem('token') if(!token && to.path !== '/login'){ next('/login') }else{ next() }})export default

退出登录

修改 HomeView.vue，把退出登录改为按钮形式，并增加退出登录的方法

退出登录 const delToken = ()=>{ localStorage.removeItem('token') router.push('/login') } return { list, active:route.path, router }

​​源码-​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。