内容：路由进阶、网络请求
一、路由进阶
1.路由模式
默认的路由模式是hash，会在浏览器地址中添加一个#，#号后面的就会解析成路由规则
但是这种模式会造成浏览器地址过长（不好看）
/src/router/index.js中通过mode参数来进行配置
export default new Router({
mode:'hash',//默认是hash，可以改成history
routes: [...]
})
2.路由命名
通过编程式导航进行路由跳转时，如果要传递的参数数量比较多，用字符串拼接的方式就会很麻烦，可以使用路由命名。
{
name:'任意的英文字符'
}
在页面进行路由跳转时：
this.$router.push({
name:'name属性',
params:{
参数1:参数值1，
...
}
})
3.路由别名
通过alias属性来设置别名
{ path:'/login',component:Login,alias:'/denglu' }
通过浏览器访问别名和路由规则效果时相同的。
4.路由导航守卫【重点】
作用：对访问的路由规则进行监控和限制
根据导航守卫的作用范围不同，有这样三种导航守卫
(1)全局导航守卫
①全局前置守卫
router.beforeEach((to,from.next)=>{
//处理逻辑
})
to 目标路由
from 来源路由
next 执行路由规则的函数
②全局后置守卫
当路由规则访问成功后会触发此钩子函数
router.afterEach((to,from){
...
})
一般只做记录使用，不进行访问的限制。
(2)组件导航守卫
在具体某个组件中要进行访问限制时，使用的导航守卫
beforeRouteEnter:((to,from,next))相当于全局中的beforeEach，但是作用范围只是当前这个组件
beforeRouteUpdate:((to,next,from))当动态路由规则发生变化时会触发此钩子函数
beforeRouteLeave:((to,from,next))当前路由离开，要前往下一个路由规则时
(3)路由导航守卫
在定义路由规则时，可以单独的给某一个路由规则设置导航守卫
path:'',
component:'',
beforeEnter:((to,from,next){...})
二、本地数据存储
把数据保存到浏览器中的
localStorage 将数据保存在本地存储中，即使浏览器关闭也不会删除数据
getItem('key')//获取指定key的本地数据存储信息
setItem('key',value)//给指定key的本地数据存储设置内容
removeItem('key')//删除指定的一个key的本地存储
clear()//删除所有的本地存储
SessionStoreage 将数据保存在本地存储中，但是一旦浏览器关闭，则会清空所有的存储数据（一般和后端结合使用）
getItem('key')//获取指定key的本地数据存储信息
setItem('key',value)//给指定key的本地数据存储设置内容
removeItem('key')//删除指定的一个key的本地存储
clear()//删除所有的本地存储
三、网络请求
1.jquery
$.ajax({
url:'请求地址',
data:提交的数据,
success:function(){}
})
2.axios
(1)安装：npm i axios --save
(2)引用：import axios from 'axios'
(3)使用
get请求
axios.get('请求地址').then(获取到的数据)
axios({
url:'请求地址',
params:{要提交的参数}
})
(4)配置
/confing/index.js
proxyTable进行配置
'/关键词':{
target:'目标域名地址',
pathRewrite:{
'/关键词':''
}
}
配置完成后，要重启项目！！！
四、网易云接口程序
1.下载
github.com里搜索网易云，找到搜索结果的第一个，然后下载
2.安装依赖
解压好程序后，通过命令行进入到程序目录执行
npm i或者cnpm i
3.运行接口程序
node app.js
五、网易云音乐案例
1.页面规划
首页
推荐音乐
热歌榜
歌曲播放页
搜索页
六、作业
1.热歌榜页面
接口：/top/list?idx=1
2.搜索页面
优先写出来静态页面和样式，然后再请求接口。
网友评论