这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战
之前自己一顿输出，看源码分析了权限的实现方式，然后发现官方有这方面的详细讲解，决定查漏补缺一下，看一下官方是怎么讲的。
首先在router/index.js中，constantRouterMap定义了一些不需要权限即可访问的页面，然后实例化vue的时候只挂载constantRouterMap。
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
后面获取到权限后，再异步挂载asyncRoutes，用户就可以访问到对应的路由了。
官方提到404页面需要最后挂载，不然所有页面都会被拦截到404，我没有做测试，选择相信作者了。
基本上就这么多了，接下来看新的知识点。
侧边栏高亮
:default-active="$route.path"\
点击侧边栏中的路由刷新当前页面的功能。由于vue-router会拦截当前路由，判断url没有变化，不会触发任何钩子或者views变化。但是有些时候确实需要这样的功能，于是可以hack一下。改变url的query来触发views的变化。
监听侧边栏的click事件，每次点击给routerpush一个query，实现刷新页面。ps.我当前项目里似乎可以加上这个功能，回头要加上。
clickLink(path) {
this.$router.push({
path,
query: {
t: +new Date() //保证每次点击路由的query项都是不一样的，确保会重新刷新view
}
})
}
之后table的话，不会使用原声的element-table，也不会用element-admin的table。由于我司的表格数据量一般比较大，而且用户不太喜欢分页，于是经常会出现一个几万条数据的table，针对这种情况，我刚开始自己做了虚拟滚动来处理数据的展示问题，后面功能越加越多，发现了vxe-table，自带了很多常用的table功能，私以为常用的功能全都有。是个很棒的table组件（只要在这个司，我永远爱vxe-table）
xuliangzhan_admin.gitee.io/vxe-table/#…
感兴趣的可以看一下，之后用vue-element-admin的话，会把vxe-table加进来，可能也会开篇文章一起学习vxe-table
