路由的配置

import { createRouter, createWebHashHistory,createWebHistory} from 'vue-router'
// import HomeView from '../views/HomeView.vue'
import LayOut from "@/views/Layout/LayOut";
import store from "@/store/index"; //vuex
import NProgress from 'nprogress' //加载时加载一个进度条
import 'nprogress/nprogress.css'
import uInfo from "@/store/state/userinfo.state";
// import rolesList from "@/views/pages/rolesList";
//路由的配置
const routes = [
  {
    path: "/login",
    name: "login",
    component: ()=> import("../views/pages/logIn")
  },
  {
    path:"/",//路由的地址
    name:"layout",//路由的名称
    component: LayOut,//页面组件
    redirect:'/index',//重定向
    //子路由/嵌套路由
    children:[
      {
        path: '/index',
        name: 'index',
        component: () => import("../views/pages/rolesList")
      },
      {
        path: '/user',
        name: 'user',
        component:() => import("../views/pages/userList")
      }
    ]
  }
]
//生成hash路由对象
const router = createRouter({
  // history: createWebHashHistory(),//哈希模式
  history:createWebHistory(),//历史模式    就是没有#号的
  routes
})

//路由守卫
router.beforeEach((to, from, next)=>{
  /**
   * to:从哪个页面
   * from:到哪个页面
   * next:只有执行next()页面才会跳转
   */
  //判断用户是否登录
  console.log("store",store.state.uInfo)
  const uInfo = store.state.uInfo.userInfo
  if (!uInfo.username){
    //未登录,跳转到login界面
    if (to.path==="/login"){
      NProgress.start()
      next()
      return
    }
    next("/login")
    NProgress.done()
  }else {
    next()
  }
})
router.afterEach(() => {
  NProgress.done()
})
// 暴露路由对象
export default router