1. axios
在项目开发中,需要经常请求数据,如果只用 axios.get() 或者 axios.post() 会造成代码冗余。
方法一:全局配置axios,所有组件共用一个axios实例。
直接把axios挂载到vue原型,axios配置全局Vue.prototype.$http = axios,再每个.vue文件中发起请求直接this.$http.get/post调用,并且配置全局axios的请求根路径url。 axios.defaults.baseURL = "'
缺点:无法实现api接口的复用
方法二:封装axios - 知乎
2. 路由
路由是hash地址和组件之间的对应关系。
① location.href 获取完成地址
location.hash 获取哈希地址
监听window哈希地址变化的函数 window.onhashchange()
箭头函数里面 this 的指向和外面的this保持一致。
② router-view:作用相当于占位符,安装好router-view后,可以使用router-link替代a标签。并且不需要带#。
<router-link to="/home"></router-link>
③ 路由重定向:y用户访问地址A,强制访问地址C,从而展示C的内容,可以使用路由规则的redirect属性。
④ 子路由:
注意:子路由如果想要设置默认地址,path可以留空。子路由的路径不需要加 ‘/’
⑤ 如果想要动态配置路由,有两种方式可以拿到参数。
方法一、
index.js: { path: '/Moive/:id', component: Movie },
对应的组件中获取: {{ this.$route.params.id }}
方法二、
在路由配置中设置props为true,可以在对应组件通过props获取
{ path: '/Moive/:id', component: Movie, props: true },
props:[ id ] // {{ id }}
⑥
this.$route 路由的参数”对象“, 因为可以拿参数值。
this.$router 路由的导航对象。
‘/’ 是用来分割路径。
在哈希地址中,在 ‘/’ 后面的参数脚做路径参数。
在哈希地址中,在 ’?‘ 后面的参数项,叫做查询参数。用this.$route.query来访问查询参数。
在 this.$route 中,path只是路径部分,fullPath是完整的地址。
⑦ vue-router中分为声明式导航和函数式导航。
声明式导航:只要是通过点击 a 链接或者 router-link 链接跳转的页面都叫做声明式导航。
编程式导航:
Ⅰ this.$router.push('hash地址')
- 跳转到指定的hash地址,并增加一条历史记录。
Ⅱ this.$router.replace('hash地址')
- 跳转到指定的hash地址,并替换当前的历史记录
Ⅲ this.$router.go(数值 n)
- 可浏览历史中的前进和后退
- 简化用法:在实际开发中,一般只会前进和后退。
⑦ 导航守卫