Vue笔记第五天(路由的使用和整合,全局axios)

第五天

1.Vue路由基本使用
a. 下包 npm i vue-router
b. 导包 import VueRouter from'vue-router'
c. 用包
①Vue.use(VueRouter )
②. 路由规则
1. 创建对应的组件xxx.vue
③. 创建路由对象 传入规则
④. 路由对象设置给Vue实例
d. 设置导航栏和内容

1. App.vue

e. 组件的位置

1. components/ xxx.vue

2 .axios的使用
a.下包 npm i axios
b.导包 import axios from 'axios'
c.在main.js中把axios设置为全局 Vue.prototype.$axios = axios
原因:这样做了以后在其他Vue文件里，通过this.$axios就可以访问了

为什么要加$符号呢?

• 这是规范
• 为什么有这个规范？
  • 为了区分这个属性是自己的还是原型里继承来的

3.设置axios基地址
因为我们项目一般访问的接口,前面网址都是一样的，只是后面的路径部分不一样,所以有个方法axios发请求时只要写路径部分，它自动帮我拼前面的网址部分,
代码:axios.defaults.baseURL ='接口地址路径'

4.整合路由
路由的好处,官网介绍的很清楚,我就不做过多赘述https://router.vuejs.org/zh/

a.编码位置在main.js中
a. 下包 npm i vue-router
b. 导包 import VueRouter from'vue-router'
c. 用包
①Vue.use(VueRouter )
②. 创建路由规则
1. 创建一个组件xxx.vue
2. routes=[ {path:"/xx",component:组件} ]
③创建路由对象
1.router
④设置给Vue实例
1.new Vue({ router })

b.编码位置在app.vue中
<router-view></router-view>
路由组件的页面在这个里面显示

c.编码位置在components中
添加的组件在components文件夹中

d.编码位置在assets中
静态资源放在assets文件夹中

5.编程式导航 - 让你可以用代码进行路由的跳转
$router.push('路径')
//如果写在methods记得加this,如果写在行内不用加this的

6.动态路由匹配 - 让你跳到对应的路由（对应的组件），还可以带参数过去

注意点：

• 编程式导航：用来跳转的路由
  • $router
• 拿传递过来的参数，用
  • $route
    • $route.params.参数名