vuejs2.0 vue-admin-cms

router-view

路由切换时都会重新渲染触发钩子

真实的业务场景中，这种情况很多。比如
我创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，官方说你可以通过watch $route的变化来做处理，但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。

 <router-view :key="key"></router-view>
    
    computed: {
        key() {
            return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
        }
     }

---

npm 安装

npm install --registry=https://registry.npm.taobao.org

---

登录流程

router.beforeEach中拦截路由

1. 当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token。
2. 拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
3. 权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。

---

权限控制

router.addRoutes

通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过router.addRoutes动态挂载路由。

权限 前端or后端 来控制？

对于前端来说不管是超级编辑还是实习编辑都是有权限进入文章编辑页面的。所以前端和后端权限的划分是不太一致，后端注重的业务，根据传入的token返回不同的状态码，前端根据状态码跳到不同的页面。

axios拦截器

service.interceptors.request.use

service.interceptors.response.use

---

path.resolve

把一个路径或路径片段的序列解析为一个绝对路径

path.resolve([…paths])里的每个参数都类似在当前目录执行一个cd操作，从左到右执行，返回的是最后的当前目录，

例如：

path.resolve('/foo/bar','./baz');相当于：

cd /foo/bar //此时当前路径为 /foo/bar
cd ./baz //此时路径为 /foo/bar/baz

---

for循环数组

for (let route of routes) {}

---

filter过滤数组

const showingChildren = children.filter(item => !item.hidden)

nextTick — Vue中DOM的异步更新

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中