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

每次我们刷新页面，左侧菜单都没有选中
在这里插入图片描述
 修改 Ho m eView.vue，获取当前页面 path，给 Menu 菜单的default-active动态赋值，这个值是默认激活菜单的 index

&lt;el-menu
	active-text-color="#ffd04b"
	background-color="#545c64"
	class="el-menu-vertical-demo"
	:default-active="active"
	text-color="#fff"
	router
&gt;

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

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

当我们进入首页http://localhost:8080/时
，页面是空白的
在这里插入图片描述
我们可以直接重定向到商品列表即可

const routes: Array&lt;RouteRecordRaw&gt; = [
  {
    path: '/',
    name: 'home',
    redirect:'goods',
    component: HomeView,
    children:[
     ......
    ]
  },
  ......
]

这样当我们登录完成进入首页时会重定向到商品列表页
在这里插入图片描述

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

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

<el-col :span="4"><el-button type="primary" @click="delToken">退出登录</el-button></el-col>

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