Vue学习

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)

• 可浏览历史中的前进和后退 
• 简化用法：在实际开发中，一般只会前进和后退。

 

 

 

 ⑦ 导航守卫