vue权限路由实现的方法示例总结(5)

export default constRouterMap;
import Vue from "vue";
import Router from "vue-router";
import ConstantRouterMap from "./routers";

Vue.use(Router);

export default new Router({
 // mode: 'history', // require service support
 scrollBehavior: () => ({ y: 0 }),
 routes: ConstantRouterMap
});

submitForm(formName) {
  let _this=this;
  this.$refs[formName].validate(valid => {
  if (valid) {
   _this.$store.dispatch("loginByUserName",{
   name:_this.ruleForm2.name,
   pass:_this.ruleForm2.pass
   }).then(()=>{
   _this.$router.push({
    path:'/'
   })
   })
  } else {
   
   return false;
  }
  });
 }

<template>
 <h1>404</h1>
</template>
<script>
export default {
 name:'page404',
 mounted(){
 if(!this.$store.state.isLogin){
  this.$router.replace({ path: '/login' });
  return;
 }
 if(!this.$store.state.initedApp){
  this.$router.replace({ path: '/init' });
  return
 }
 }
}
</script>

<template>
 <div></div>
</template>
<script>
import { getAccessMenuList } from "../mock/menus";
import components from "../router/routerComponents.js";
export default {
 async mounted() {
 if (!this.$store.state.isLogin) {
  this.$router.push({ path: "/login" });
  return;
 }
 if (!this.$store.state.initedApp) {
  const loading = this.$loading({
  lock: true,
  text: "初始化中",
  spinner: "el-icon-loading",
  background: "rgba(0, 0, 0, 0.7)"
  });
  let menus = await getAccessMenuList(); //模拟从后端获取
  var routers = [...menus];
  for (let router of routers) {
  let component = components[router.component];
  router.component = component;
  }
  this.$router.addRoutes(routers);
  this.$store.dispatch("setAccessMenuList", menus).then(() => {
  loading.close();
  this.$router.replace({
   path: "/"
  });
  });
  return;
 } else {
  this.$router.replace({
  path: "/"
  });
 }
 }
};
</script>