我一直觉得看别人的代码收货最大就是能知道用另一种方式来实现同一种效果，而且往往别人的方法更加简洁和独到，可以通过各种简写来实现少写代码（偷懒）的效果，以提高代码效率。下面废话不多说，直接上干货。比较常见的知识点我就不提了，只列我自己比较生疏和陌生的技巧。
新手知识点归纳，大佬轻喷
&巧用
<div class="bullshit">
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">请确保您的URL地址填写正确,或者点击下方按钮返回首页</div>
<a href="" class="bullshit__return-home">返回首页</a>
</div>上面我们可以用&和sass配合使用来拓展父类class简写类名
.bullshit{
width:300px;
padding:30px 0;
&__headline{
font-size:20px;
line-height:24px;
}
}路由重定向
我们会遇到用户输入项目中未定义的页面路由，此时我们需要利用route中的redirect将其重定向到404路由
这段代码要放在route的最后面，在找不到上面其他路由的情况下才会重定向。
{// 其他任何不存在的路由地址全都重定向到404
path: '*',
redirect: '/404', //当然你们可以自行更换重定向地址
hidden: true// 用于标识aside中不显示该路由
}路由模块懒加载
之前我一直用的是先import后引用变量到component这种方法，直到前两天突然看到component: () => import('@/views/dashboard')这种写法居然能按需加载，比require.ensure那一长串友好了100倍有木有啊，瞬间惊为天人，决定欣然笑纳。
import Layout from '@/layout'
{
path: '/',
component: Layout,
redirect:'/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard'),
meta: {title: '首页', icon: 'dashboard'}
},
]
},
前端匹配路由访问权限
有时候某些表单页面用户是有查看权限但没有提交权限的，此时前端权限和后台权限的判定逻辑有了冲突，如果由后台定义则该页面不能展示，实际上是需要展示的。
Vuex模块化后的Getters管理
store再写一个getters用于存放各个子模块的getters。
不像state可以用this.$store.user.token的方式直接调用子模块（当然vuex官方推荐使用getters获取state里的数据），getters是将所有子模块的getters聚合到一起的，我之前经常用this.$store.user.getters()来调用，结果报错了，感觉很神奇。
所以干脆把所有子模块定义中的getters可以统一到一个getters.js文件中，和store下面的index.js同级
还有个优点是方便调用其他子模块的数据
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name
}
export default getters导出指定默认名
export {default as SideBar} from './SideBar'
