前端统一定义路由组件，比如
const Home = () => import("../pages/Home.vue"); const UserInfo = () => import("../pages/UserInfo.vue"); export default { home: Home, userInfo: UserInfo };将路由组件定义为这种key-value的结构。
后端返回格式
[ { name: "home", path: "http://www.likecs.com/", component: "home" }, { name: "home", path: "/userinfo", component: "userInfo" } ]在将后端返回路由通过addRoutes动态挂载之间，需要将数据处理一下，将component字段换为真正的组件。
至于菜单与路由是否还要分离，怎么对应，可以根据实际需求进行处理。
如果有嵌套路由，后端功能设计的时候，要注意添加相应的字段。前端拿到数据也要做相应的处理。
缺点全局路由守卫里，每次路由跳转都要做判断
前后端的配合要求更高
不使用全局路由守卫前面几种方式，除了登录页与主应用分离,每次路由跳转，都在全局路由守卫里做了判断。
实现应用初始化的时候只挂载不需要权限控制的路由
const constRouterMap = [ { name: "login", path: "/login", component: () => import("@/pages/Login.vue") }, { path: "/404", component: () => import("@/pages/Page404.vue") }, { path: "/init", component: () => import("@/pages/Init.vue") }, { path: "*", redirect: "/404" } ]; 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:'http://www.likecs.com/' }) }) } else { return false; } }); }因为当前没有/路由，会跳到/404
<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>404组件里判断已经登录，接着判断应用是否已经初始化(用户权限信息，可访问菜单，路由等是否已经从后端取得)。没有初始化则跳转到/init路由
<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: "http://www.likecs.com/" }); }); return; } else { this.$router.replace({ path: "http://www.likecs.com/" }); } } }; </script>init组件里判断应用是否已经初始化(避免初始化后，直接从地址栏输入地址再次进入当前组件)。
如果已经初始化，跳转/路由(如果后端返回的路由里没有定义次路由，则会跳转404)。
没有初始化，则调用远程接口获取菜单和路由等，然后处理后端返回的路由，将component赋值为真正
的组件，接着调用addRoutes挂载新路由，最后跳转/路由即可。菜单的处理也是在此处，看实际
需求。
实现例子
缺点在404页面做了判断，感觉比较怪异
多引入了一个init页面组件
总结比较推荐后面两种实现方式。