76 lines
1.2 KiB
Plaintext
76 lines
1.2 KiB
Plaintext
单页web应用(spa)
|
||
|
||
只有一个HTML页面，程序中所有页面都是js
|
||
路由 vue-router
|
||
|
||
|
||
路由有两种模式
|
||
|
||
https://www.jianshu.com/p/ae8f9c41a77c
|
||
|
||
hash
|
||
www.baidu.com/#/index
|
||
www.baidu.com/#/about
|
||
|
||
|
||
location.hash
|
||
|
||
history
|
||
www.baidu.com/index
|
||
www.baidu.com/about
|
||
|
||
|
||
pushState 添加一条浏览器的历史记录
|
||
replaceState 替换浏览器历史记录
|
||
|
||
|
||
页面跳转
|
||
1: router-link
|
||
2: this.$router.push
|
||
|
||
|
||
$router表示方法
|
||
$route是获取路由参数
|
||
|
||
|
||
参数传递：
|
||
1：query
|
||
www.baidu.com/#/info?id=1&page=122
|
||
|
||
2：params
|
||
www.baidu.com/#/info/1/122
|
||
|
||
|
||
导航守卫
|
||
1：全局前置守卫
|
||
2：路由独享的守卫
|
||
3：组件内的守卫
|
||
|
||
|
||
登录拦截
|
||
|
||
1：在登录页面，点击登录按钮，调用登录接口，将用户名密码给后端
|
||
{
|
||
code: 200,
|
||
msg: '',
|
||
result: {
|
||
token: 'sdfgfdwqerggfwbt'
|
||
}
|
||
}
|
||
|
||
token：是一串用户信息的加密字符串
|
||
WQDWEFEFWEFREFREFG.WFREGRTY5665YHRTGDR.WFREGRTY5665YHRTGDR
|
||
|
||
后端在接口中会返回token，前端需要缓存到本地中。
|
||
|
||
2: 前端在全局路由守卫中判断，需要将要访问的页面是否需要登录，如果需要登录，是否已经登录
|
||
|
||
接口是无状态的
|
||
|
||
json web token jwt
|
||
|
||
|
||
vue-cli
|
||
2.x
|
||
|
||
3.x 4.x |