TOMMYHU

以下为基于一个会话的动态路由方案
之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路，因为不喜欢在每次路由跳转的before钩子里做判断，所以在初始化Vue实例前对路由做了筛选，再用实际路由初始化Vue实例，代价是登录页需要从Vue实例中独立出来，实现上倒没什么问题，不过这种做法需要在登录和首页之间通过url跳转，感觉总是不太”优雅”，实际上只要能在登录后动态修改当前实例的路由就行了，之前确实没办法，但vue-router 2.2版本新增了一个router.addRoutes(routes)方法，让动态路由得以实现。

想当然的实现方案
用动态路由实现路由权限控制貌似是一个完美的方案，初始路由只有登录和404，登录后动态添加可用路由，同时将菜单数据保存到Vuex或本地用于实现动态菜单，关键节点大致如下：
//初始路由： [{   path: '/login',   name: 'login',   component: (resolve) => require(['../views/common/404.vue'], resolve) }, {   path: '/404',   name: '404',   component: (resolve) => require(['../views/common/404.vue'], resolve) }, {   path: '*',   redirect: '/404' }] //登录逻辑 let vm = this; axios.get('/login', vm.user).then((res) => {     let extendsRoutes = filterRoutes(res.menus);     <!--     //假设得到的可用路由如下     [{       path: '/',       name: '首页',       component: (resolve) => require(['../views/index.vue'], resolve),       children: [{         path: '/menus',         name: '菜单管理',         component: (resolve) => require(['../views/menus.vue'], resolve)       }, {         path: '/resources',         name: '资源管理',         component: (resolve) => require(['../views/resources.vue'], resolve)       }]     }]-->     //存菜单     sessionStorage.setItem('menus',JSON.stringify(extendsRoutes[0].children));     //动态添加路由     vm.$router.addRoutes(extendsRoutes);     //跳转到应用界面     vm.$router.push({path:'/'}); }) //首页获取菜单数据 this.menus = JSON.parse(sessionStorage.getItem('menus')); //用此数据循环菜单 ..
目前为止看上去一切顺利，然而前方有坑。

动态路由的坑
第一个坑是，如果你将这套逻辑实现之后会发现打开应用看到的第一个页面是404，这是因为启动服务后将默认打开首页’/‘，然而初始路由中没有这个路径，因此根据路由规则跳转到了404。我们希望结果当然是跳转到’/login’，因此需要对这种情况做判断，在用户登录之前所有请求都要指向’/login’，这个判断可以在before钩子里做也可以在根组件里做，建议做在根组件的created回调里，核心代码大概这样：
let isLogin = sessionStorage.getItem('user'); if(!isLogin){     return this.$router.push({path:'/login'}); }
这时候已经可以顺利登录了，登录后很快就会发现第二个坑，手动刷新页面又会跳到404，这是因为刷新会导致Vue重新实例化，路由也恢复到了初始路由，于是当前路径又被重定向到了404，这个问题的根源是可用路由没有实现持久化，那么可以通过将路由数据存sessionStorage来解决，实例化之前如果检测到本地路由就直接合并路由，像这样：
//检测本地路由 let localRoutes = sessionStorage.getItem('routes'); if(localRoutes){     router.addRoutes(JSON.parse(localRoutes)); } //实例化 new Vue({   el: '#app',   router,   render: h => h(App) });
理论上可以，但实际操作要远比上述代码复杂，因为存在本地的只能是权限数据而不是真实路由，路由在存、取之前都要先根据权限匹配获得，过程还是挺繁琐的，而且必须依赖sessionStorage这种持久存储，没有其他方法。问题就出在这个sessionStorage上，原则上权限只能在内存变量中流转，不能直接暴露到用户可操作的地方，试想只要用户手动修改了sessionStorage里的权限，再刷新一下页面就能突破前端路由控制了，非常的不靠谱。

改进方案
既然不能存本地，那就每次刷新都重新从服务端获取，所以改进后的方案是本地存用户token，每次刷新要凭token从服务端重新获取用户信息和权限，然后动态更新路由，获取权限操作可以跟登录检测一起放在根组件的created回调中进行，确保访问任何路径都会先执行这一步，但因为获取权限是异步操作，在此之前仍然会经过应用初始化，所以还是会遇到404的问题，为此我们只需做一个小调整，将不匹配路径(‘*’)跳404的路由从初始路由中移除，动态更新路由时再把这个配置加进去，如下：
let userPath = ...//我们的动态路由 //注入时拼接404处理路由 this.$router.addRoutes(userPath.concat([{   path: '*',   redirect: '/404' }]));
这样就解决了刷新问题，后面还有几个小问题就简单了。

首先是菜单，之前通过$router.options.routes访问路由数据实现动态菜单，但这个数据不是响应式的，无法追踪动态路由的变化，因此我们需要将得到的导航菜单数据存到sessionStorage或Vuex里实现数据共享。

资源权限控制也受到很大的影响，实现较为细致的权限控制需要一个自定义权限验证指令和一个全局验证方法，之前的方案里权限是在Vue实例化之前获取的，所以可以很方便的拿到权限后实现验证方法，然后用验证方法实现自定义指令，再将方法全局混合进Vue，然后实例化，这样实例中的 所有组件都可以使用自定义指令和验证方法；但现在的方案是先实例化再获取权限，实例化之前根本没有权限数据，所以自定义指无法实现，等拿到权限后实现了验证方法，却无法再全局混合了。

这个问题最后也解决了，但解决方案就彻底的”有辱斯文”了，首先是全局方法的实现，直接这么做:

Vue.prototype.has = function(){
    ...
}
使用方式跟全局混合的方法完全一样。

自定义指令的实现本来很头疼，因为全局指令只能在实例化之前实现，但那时候又确实没有权限，不过既然验证方法这么做的话，指令倒是也顺便解决了，像这样：
//权限指令 Vue.directive('has', {   bind: function(el, binding) {     if (!Vue.prototype.has(binding.value)) {       el.parentNode.removeChild(el);     }   } });
神奇的prototype貌似自带惰性效果，可以先注册后实现，具体原因我也不太明白，如过有大牛路过，希望能留下答案。

后记
生命不息，折腾不止啊，本来已经放弃的思路，捋着捋着竟然捋顺了，然后又花了大半天把原来多入口的项目改成了单入口，虽然麻烦了一顿，但心里总算舒坦了。

前端路上原创技术文章，转载请注明出处：https://refined-x.com/2017/09/01/用addRoutes实现动态路由/

1.PWA 渐进式网络应用 ( Progressive Web Apps )

PWA（Progressive Web App）是全新的网页技术，让网站的离线体验变得更好，网络连接断断续续时体验也会更好，它会模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验

Google 声称世界各地各行业在在 PWA 的构建上都获得了很大的成功，星巴克在推出 PWA 网站后，日活跃用户数量增加了 2 倍，他们对广告网站进行测试，发现当一个网站切换到 PWA 时，平均转化率提高了 20%。

PWA学习文档  https://juejin.im/entry/5a1c394a5188255851326da5

LAVAS -基于 Vue.js 的 PWA 解决方案 帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题.

地址  https://lavas.baidu.com/

相关联的Service Worker技术

Service Worker 是近年来 Web 最大的改进之一，它是 Chrome 团队力推的一个 Web API，它将开发人员从页面的生命周期中解放出来，运行于浏览器后台，可以控制打开作用范围下的所有页面请求，使 Web 应用程序能够脱机工作。

Workbox库 https://developers.google.com/web/tools/workbox/

2. Polymer

Polymer是一个开源JS库，由Google Chrome团队内部的前端开发者发起并维护。

如你所知，Chrome浏览器对各种WEB新标准的兼容一直支持得非常好。比如：Web Components、Service Workers，以及HTTP/2。因此，Polymer认为，我们应该充分利用浏览器平台本身的能力，而不是去重复发明各种轮子。

文档 : https://www.polymer-project.org/2.0/start/

3.WebAssembly

使用WebAssembly，我们可以在浏览器中运行一些高性能、低级别的编程语言，可用它将大型的C和C++代码库比如游戏、物理引擎甚至是桌面应用程序导入Web平台。

学习地址 https://segmentfault.com/a/1190000008402872

4.Web Components

https://blog.csdn.net/powertoolsteam/article/details/17997291

5.GraphQL

GraphQL 是一个由Facebook提出的 应用层查询语言. 使用 GraphQL, 你可以基于图模式定义你的后端. 然后客户端就可以请求所需要的数据集。

各版本服务实现 http://graphql.cn/code/#javascript

1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约，是我喜欢的风格 star 2.3k

中文文档 在线预览

2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k

基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。

中文文档 在线预览

3.Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库 star 8.3k

中文文档 github地址 在线预览

4.MUI  最接近原生APP体验的高性能前端框架 star 7.5k

中文文档 github地址

5.Muse-ui   基于 Vue 2.0 和 Material Design 的 UI 组件库 star 4.9k

中文文档 github地址

6.Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。star 1k

中文文档 github地址

7.Cube UI star 3k

滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库

github地址 中文文档

特性

    
•     

  质量可靠

      

  由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。

      
    
•     

  体验极致

      

  以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。

      
    
•     

  标准规范

      

  遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。

      
    
•     

  扩展性强

      

  支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发

      

学习reactjs的tutorial是看到function(){this.XX }.bind(this);不是很理解。
补充： bind的作用我懂，在这里的写法的目的不太了解
$.ajax({       url: this.props.url,       dataType: 'json',       cache: false,       success: function(data) {         this.setState({data: data});       }.bind(this),       error: function(xhr, status, err) {         console.error(this.props.url, status, err.toString());       }.bind(this)     });
传送门函数
改变this的指向，类似以前大家很喜欢写的var that = this;或者var self = this;
都是一个道理

有多种方式可以在vue中定义模板组件。我算了一下，至少有7种不同的方法：


字符串（String）
模板字符串（Template literal）
X-Templates
内联（Inline）
Render函数（Render functions）
JSX
单文件组件（Single page components）


当然，可能还有更多方法!

在这篇文章里，我们将会展示每一个方法的示例，分析其优缺点，以便你能明白在特定的情形下，哪种方式是合适的。

1. 字符串
默认情况下，在JS文件里模板会被定义为一个字符串。但是我觉得大家都会同意这种写法很难看懂，它除了有广泛的浏览器支持之外，并没有什么优势。
Vue.component('my-checkbox', {   template: '<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title">{{ title }}</div></div>',   data() {     return { checked: false, title: 'Check me' }   },   methods: {     check() { this.checked = !this.checked; }   } });


2. 模板字符串（Template literals）

render: h => h(App)

如果你一脸懵逼，看看下面的 你就开朗了
h作为createElement的别名是一个通用惯例

下面的写法也许会更白话一点
render: function (createElement) {     return createElement(App); }
或
render (createElement) {     return createElement(App); }
或
render (h){     return h(App); }
最后箭头函数缩写得到现在的样子
render: h => h(App)


其中 根据 Vue.js 作者 Even You 的回复，h 的含义如下：

作用：将一个数组转为用逗号分隔的参数序列。
//该运算符主要用于函数调用。<br/>function push(array, ...items) {   array.push(...items); } function add(x, y) {   return x + y; } var numbers = [4, 38]; add(...numbers) // 42 //扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。 // ES5 的写法 Math.max.apply(null, [14, 3, 77]) // ES6 的写法 Math.max(...[14, 3, 77]) // 等同于 Math.max(14, 3, 77); //通过push函数，将一个数组添加到另一个数组的尾部 // ES5的 写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); // ES6 的写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(...arr2); //合并数组 // ES5 [1, 2].concat(more) // ES6 [1, 2, ...more] var arr1 = ['a', 'b']; var arr2 = ['c']; var arr3 = ['d', 'e']; // ES5的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ] 扩展运算符将字符串转为真正的数组 [...'hello'] // [ "h", "e", "l", "l", "o" ]

1. vue-router懒加载定义
当路由被访问的时候才加载对应组件

2. vue-router懒加载作用
当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率。

3. vue-router懒加载实现
第一种写法
const routers = [     {         path: '/',         name: 'index',         component: (resolve) => require(['./views/index.vue'], resolve)     } ]

第二种写法
const Index = () => import(/* webpackChunkName: "group-home" */  '@/views/index') const routers = [     {         path: '/',         name: 'index',         component: Index     } ]
第三种写法
const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home'); const routers = [     {         path: '/',         name: 'index',         component: Index     } ]
备注
‘@/’ 和 ‘./’有异曲同工之用 ‘.vue’后缀可省略 ‘group-home’ 是把组件按组分块打包, 可以将多个组件放入这个组中