- 创建路由实例，createRouter
配置路由：history or hash；定义路由模式，菜单路由、非菜单路由；定义白名单
import {Router,createRouter} from 'vue-router';
export const router:Router = createRouter({// 定义路由
// 指定路由模式
history:getHistoryMode(import.meta.env.VITE_ROUTER_HISTORY),
// 路由配置
routes:[{path:'/',name:'Home',component:Home}],
// 路由切换时的滚动行为
scrollBehavior(to, from, savedPosition){
if (savedPosition) { return savedPosition; } else { return { top: 0 };}
}
})
app.use(router);// 引入路由
- 登录：根据用户角色权限获取动态路由
- 根据router.beforeEach检查用户是否有权限
const whiteList = ['/login'];// 白名单
router.beforeEach((to,form,next) => {
//判断权限、白名单等
if(whiteList.indexOf(to.path) != -1){
next()
}else{
next({path:"/login"})
}
})
