May
30
$mount()手动挂载
当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；
假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如：
或者
当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；
假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如：
或者
May
29
按官网
报错
Vant is not defined
按需引入后解决
问题：
见官方文档https://youzan.github.io/vant/#/zh-CN/quickstart “快速上手--方式三”，另外github的基于step的说明的确很坑爹，已提交commit了
方式三. 导入所有组件
配置 babel-plugin-import 插件后将不允许导入所有组件的方式
报错
Vant is not defined
按需引入后解决
问题：
见官方文档https://youzan.github.io/vant/#/zh-CN/quickstart “快速上手--方式三”，另外github的基于step的说明的确很坑爹，已提交commit了
方式三. 导入所有组件
配置 babel-plugin-import 插件后将不允许导入所有组件的方式
May
28
May
27
Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插件的用途很广泛，从全局组件，到为应用添加一些额外的功能、如路由(Vue Router)，存储在应用程序里的不可变数据(Vuex)。
一般来说，Vue插件的开发是非常简单的。Vue插件仅仅是包含一个公开方法install的对象、这个方法有两个参数：Vue 构造器和一个可选的选项对象。尽管，插件系统看起来十分简单，但其仍然可以产生相当大的作用。
你的第一个插件
为了打开vue插件开发的大门，下面我们将先实现一个最简单的插件。这个插件的功能是：当组件被挂载到DOM后，控制台输出Mounted!。
现在，你的插件便可以使用了。你可以通过导入并用Vue.use来显式调用你的插件：Vue.use(MyPlugin)
你可能会奇怪，为什么我不能直接在main.js中调用Vue.mixin()来实现这一点呢？其原因就是：我们向Vue添加全局功能，而没有直接修改应用逻辑。拆分模块这种做法总是极好的，你可以随时添加或移除一个单独的模块。同时，这也使得插件非常容易分发。
添加一些其他的功能
安装应用范围的组件和指令
如果你想把组件或指令打包为一个插件来进行分发，可以这样写：
修改Vue构造器
你可以在插件中以你期待的方式来修改Vue构造器(全局Vue对象)。下面的代码在Vue构造器中添加了一个属性myAddedProperty和一个方法myAddedMethod。
修改Vue实例
不需要任何注入机制便可以将属性或方法直接添加到组件实例，你可以这样来修改Vue构造器的prototype：
这些属性将会被加到所有的组件和Vue实例中。
社区里公认的做法是：添加在Vue prototype里的任何属性都要以美元符$作为其前缀
添加组件的生命周期钩子或属性
如上文中“你的第一个插件”示例所示，你可以通过Mixin添加生命周期钩子对Vue组件进行修改。
Mixin是一个相当重要的话题，但不在本文的讨论范围之内。目前，可以肯定的是，Mixin是一种灵活的分布式复用 Vue 组件的方式，Mixin可以包含任意组件选项并可以混合进其他组件之中。
自动安装插件
对于那些没有在应用中使用模块化系统的用户，他们往往将通过
一般来说，Vue插件的开发是非常简单的。Vue插件仅仅是包含一个公开方法install的对象、这个方法有两个参数：Vue 构造器和一个可选的选项对象。尽管，插件系统看起来十分简单，但其仍然可以产生相当大的作用。
你的第一个插件
为了打开vue插件开发的大门，下面我们将先实现一个最简单的插件。这个插件的功能是：当组件被挂载到DOM后，控制台输出Mounted!。
现在，你的插件便可以使用了。你可以通过导入并用Vue.use来显式调用你的插件：Vue.use(MyPlugin)
你可能会奇怪，为什么我不能直接在main.js中调用Vue.mixin()来实现这一点呢？其原因就是：我们向Vue添加全局功能，而没有直接修改应用逻辑。拆分模块这种做法总是极好的，你可以随时添加或移除一个单独的模块。同时，这也使得插件非常容易分发。
添加一些其他的功能
安装应用范围的组件和指令
如果你想把组件或指令打包为一个插件来进行分发，可以这样写：
修改Vue构造器
你可以在插件中以你期待的方式来修改Vue构造器(全局Vue对象)。下面的代码在Vue构造器中添加了一个属性myAddedProperty和一个方法myAddedMethod。
修改Vue实例
不需要任何注入机制便可以将属性或方法直接添加到组件实例，你可以这样来修改Vue构造器的prototype：
这些属性将会被加到所有的组件和Vue实例中。
社区里公认的做法是：添加在Vue prototype里的任何属性都要以美元符$作为其前缀
添加组件的生命周期钩子或属性
如上文中“你的第一个插件”示例所示，你可以通过Mixin添加生命周期钩子对Vue组件进行修改。
Mixin是一个相当重要的话题，但不在本文的讨论范围之内。目前，可以肯定的是，Mixin是一种灵活的分布式复用 Vue 组件的方式，Mixin可以包含任意组件选项并可以混合进其他组件之中。
自动安装插件
对于那些没有在应用中使用模块化系统的用户，他们往往将通过
May
27
以下为基于一个会话的动态路由方案
之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路，因为不喜欢在每次路由跳转的before钩子里做判断，所以在初始化Vue实例前对路由做了筛选，再用实际路由初始化Vue实例，代价是登录页需要从Vue实例中独立出来，实现上倒没什么问题，不过这种做法需要在登录和首页之间通过url跳转，感觉总是不太”优雅”，实际上只要能在登录后动态修改当前实例的路由就行了，之前确实没办法，但vue-router 2.2版本新增了一个router.addRoutes(routes)方法，让动态路由得以实现。
想当然的实现方案
用动态路由实现路由权限控制貌似是一个完美的方案，初始路由只有登录和404，登录后动态添加可用路由，同时将菜单数据保存到Vuex或本地用于实现动态菜单，关键节点大致如下：
目前为止看上去一切顺利，然而前方有坑。
动态路由的坑
第一个坑是，如果你将这套逻辑实现之后会发现打开应用看到的第一个页面是404，这是因为启动服务后将默认打开首页’/‘，然而初始路由中没有这个路径，因此根据路由规则跳转到了404。我们希望结果当然是跳转到’/login’，因此需要对这种情况做判断，在用户登录之前所有请求都要指向’/login’，这个判断可以在before钩子里做也可以在根组件里做，建议做在根组件的created回调里，核心代码大概这样：
这时候已经可以顺利登录了，登录后很快就会发现第二个坑，手动刷新页面又会跳到404，这是因为刷新会导致Vue重新实例化，路由也恢复到了初始路由，于是当前路径又被重定向到了404，这个问题的根源是可用路由没有实现持久化，那么可以通过将路由数据存sessionStorage来解决，实例化之前如果检测到本地路由就直接合并路由，像这样：
理论上可以，但实际操作要远比上述代码复杂，因为存在本地的只能是权限数据而不是真实路由，路由在存、取之前都要先根据权限匹配获得，过程还是挺繁琐的，而且必须依赖sessionStorage这种持久存储，没有其他方法。问题就出在这个sessionStorage上，原则上权限只能在内存变量中流转，不能直接暴露到用户可操作的地方，试想只要用户手动修改了sessionStorage里的权限，再刷新一下页面就能突破前端路由控制了，非常的不靠谱。
改进方案
既然不能存本地，那就每次刷新都重新从服务端获取，所以改进后的方案是本地存用户token，每次刷新要凭token从服务端重新获取用户信息和权限，然后动态更新路由，获取权限操作可以跟登录检测一起放在根组件的created回调中进行，确保访问任何路径都会先执行这一步，但因为获取权限是异步操作，在此之前仍然会经过应用初始化，所以还是会遇到404的问题，为此我们只需做一个小调整，将不匹配路径(‘*’)跳404的路由从初始路由中移除，动态更新路由时再把这个配置加进去，如下：
这样就解决了刷新问题，后面还有几个小问题就简单了。
首先是菜单，之前通过$router.options.routes访问路由数据实现动态菜单，但这个数据不是响应式的，无法追踪动态路由的变化，因此我们需要将得到的导航菜单数据存到sessionStorage或Vuex里实现数据共享。
资源权限控制也受到很大的影响，实现较为细致的权限控制需要一个自定义权限验证指令和一个全局验证方法，之前的方案里权限是在Vue实例化之前获取的，所以可以很方便的拿到权限后实现验证方法，然后用验证方法实现自定义指令，再将方法全局混合进Vue，然后实例化，这样实例中的 所有组件都可以使用自定义指令和验证方法；但现在的方案是先实例化再获取权限，实例化之前根本没有权限数据，所以自定义指无法实现，等拿到权限后实现了验证方法，却无法再全局混合了。
这个问题最后也解决了，但解决方案就彻底的”有辱斯文”了，首先是全局方法的实现，直接这么做:
Vue.prototype.has = function(){
...
}
使用方式跟全局混合的方法完全一样。
自定义指令的实现本来很头疼，因为全局指令只能在实例化之前实现，但那时候又确实没有权限，不过既然验证方法这么做的话，指令倒是也顺便解决了，像这样：
神奇的prototype貌似自带惰性效果，可以先注册后实现，具体原因我也不太明白，如过有大牛路过，希望能留下答案。
后记
生命不息，折腾不止啊，本来已经放弃的思路，捋着捋着竟然捋顺了，然后又花了大半天把原来多入口的项目改成了单入口，虽然麻烦了一顿，但心里总算舒坦了。
前端路上原创技术文章，转载请注明出处：https://refined-x.com/2017/09/01/用addRoutes实现动态路由/
之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路，因为不喜欢在每次路由跳转的before钩子里做判断，所以在初始化Vue实例前对路由做了筛选，再用实际路由初始化Vue实例，代价是登录页需要从Vue实例中独立出来，实现上倒没什么问题，不过这种做法需要在登录和首页之间通过url跳转，感觉总是不太”优雅”，实际上只要能在登录后动态修改当前实例的路由就行了，之前确实没办法，但vue-router 2.2版本新增了一个router.addRoutes(routes)方法，让动态路由得以实现。
想当然的实现方案
用动态路由实现路由权限控制貌似是一个完美的方案，初始路由只有登录和404，登录后动态添加可用路由，同时将菜单数据保存到Vuex或本地用于实现动态菜单，关键节点大致如下：
目前为止看上去一切顺利，然而前方有坑。
动态路由的坑
第一个坑是，如果你将这套逻辑实现之后会发现打开应用看到的第一个页面是404，这是因为启动服务后将默认打开首页’/‘，然而初始路由中没有这个路径，因此根据路由规则跳转到了404。我们希望结果当然是跳转到’/login’，因此需要对这种情况做判断，在用户登录之前所有请求都要指向’/login’，这个判断可以在before钩子里做也可以在根组件里做，建议做在根组件的created回调里，核心代码大概这样：
这时候已经可以顺利登录了，登录后很快就会发现第二个坑，手动刷新页面又会跳到404，这是因为刷新会导致Vue重新实例化，路由也恢复到了初始路由，于是当前路径又被重定向到了404，这个问题的根源是可用路由没有实现持久化，那么可以通过将路由数据存sessionStorage来解决，实例化之前如果检测到本地路由就直接合并路由，像这样：
理论上可以，但实际操作要远比上述代码复杂，因为存在本地的只能是权限数据而不是真实路由，路由在存、取之前都要先根据权限匹配获得，过程还是挺繁琐的，而且必须依赖sessionStorage这种持久存储，没有其他方法。问题就出在这个sessionStorage上，原则上权限只能在内存变量中流转，不能直接暴露到用户可操作的地方，试想只要用户手动修改了sessionStorage里的权限，再刷新一下页面就能突破前端路由控制了，非常的不靠谱。
改进方案
既然不能存本地，那就每次刷新都重新从服务端获取，所以改进后的方案是本地存用户token，每次刷新要凭token从服务端重新获取用户信息和权限，然后动态更新路由，获取权限操作可以跟登录检测一起放在根组件的created回调中进行，确保访问任何路径都会先执行这一步，但因为获取权限是异步操作，在此之前仍然会经过应用初始化，所以还是会遇到404的问题，为此我们只需做一个小调整，将不匹配路径(‘*’)跳404的路由从初始路由中移除，动态更新路由时再把这个配置加进去，如下：
这样就解决了刷新问题，后面还有几个小问题就简单了。
首先是菜单，之前通过$router.options.routes访问路由数据实现动态菜单，但这个数据不是响应式的，无法追踪动态路由的变化，因此我们需要将得到的导航菜单数据存到sessionStorage或Vuex里实现数据共享。
资源权限控制也受到很大的影响，实现较为细致的权限控制需要一个自定义权限验证指令和一个全局验证方法，之前的方案里权限是在Vue实例化之前获取的，所以可以很方便的拿到权限后实现验证方法，然后用验证方法实现自定义指令，再将方法全局混合进Vue，然后实例化，这样实例中的 所有组件都可以使用自定义指令和验证方法；但现在的方案是先实例化再获取权限，实例化之前根本没有权限数据，所以自定义指无法实现，等拿到权限后实现了验证方法，却无法再全局混合了。
这个问题最后也解决了，但解决方案就彻底的”有辱斯文”了，首先是全局方法的实现，直接这么做:
Vue.prototype.has = function(){
...
}
使用方式跟全局混合的方法完全一样。
自定义指令的实现本来很头疼，因为全局指令只能在实例化之前实现，但那时候又确实没有权限，不过既然验证方法这么做的话，指令倒是也顺便解决了，像这样：
神奇的prototype貌似自带惰性效果，可以先注册后实现，具体原因我也不太明白，如过有大牛路过，希望能留下答案。
后记
生命不息，折腾不止啊，本来已经放弃的思路，捋着捋着竟然捋顺了，然后又花了大半天把原来多入口的项目改成了单入口，虽然麻烦了一顿，但心里总算舒坦了。
前端路上原创技术文章，转载请注明出处：https://refined-x.com/2017/09/01/用addRoutes实现动态路由/
