VUE第五天学习

内容：路由进阶、网络请求 一、路由进阶 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 http://localhost:3000 五、网易云音乐案例 1.页面规划 首页 推荐音乐 热歌榜 歌曲播放页 搜索页 六、作业 1.热歌榜页面 接口：/top/list?idx=1 2.搜索页面 优先写出来静态页面和样式，然后再请求接口。

本文章由javascript技术分享原创和收集