loader

https://www.jianshu.com/p/59cef687b5bf
VUE相关问题

路由的模式

hash(默认) history
可以不刷新页面，更改路由地址的方法：
默认地址：localhost:8080/#
1.location.hash = 'aaa'
hash地址：localhost:8080/#/aaa
2.history.pushState({},'','home')
history地址： localhost:8080/home
这个是栈添加（先进后出）
history.back() = history.go(-1) 浏览器后退
history.forword() = history.go(1)浏览器前进
3.history.replaceState({},'','about') 这个相比于2更好，可以替换历史路由

redirect 重定向

const router = [ {path:'/',redirect:'home'}]
这样根路径就会访问默认home页面

hash如何改成history

new VueRouter({mode:'history'})

路由跳转以及router link标签自带属性

路由跳转 组件占位
1.to属性：用于指定跳转的路径；
2.tag属性：用于改变其他标签；
3.replace属性：空属性，不会前进/返回；
4.active-class属性：更改选中默认class样式名字。可以直接在标签内改，也可以new VueRouter({linkActiveClass:'active'})；
5.通过触发点击事件完成跳转this.$router.push('home')，也有replace()方法，同样不能前进/后退。

动态路由(传参)

image.png

image.png

image.png

在user页面可以通过$route.params.userId或者$route.query.id来得到传进来的参数，也可以通过props来直接获取userId；

$router和$route的区别

$router创建的new VueRouter({}) 对象；而$route是当前活跃的路由

路由懒加载

image.png

路由的嵌套

不写了

路由守卫

https://www.jianshu.com/p/d7838b48810a