最近做一个后台管理系统，涉及到前端路由权限问题，网上也搜了各种解决方案，最终都没能实现，后面自行研究，直接上代码。

import { createRouter, createWebHashHistory } from "vue-router";
import { nextTick } from 'vue'
import routes from './routes'
import store from '@/state/store';
const router = createRouter({
  base: '/',
  history: createWebHashHistory(),
  mode: 'hash',
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
})
router.beforeEach(async (to, from, next) => {
  if (!store.getters?.getHasGetRoute) {
   // 调用后台接口，获取菜单路由
    const route = await store.dispath('route/getRoutes')
    route.forEach(async (item) => {
      const r = {
        path: item.path,
        component: () => import(`@/views${item.component}`),
        meta: { title: item.name}
      };
      await router.addRoute(r);
    });
     store.commit('route/SET_PERMISSION_RESET', true);
    nextTick(() => {
      next(to.fullPath)
    })
  } else {
    next()
  }
})

export default router

网上的解决方案都千奇百怪，要么复杂，要么无效！