vue-路由和Http

vue-路由

路由的优点：

使用路由之后可以在不刷新页面的情况下进行跳转

使用方法：

1、下载安装对应的路由组件

2、在main.js中引入路由模块
import VueRouter from 'vue-router’
Vue.use(VueRouter)

3、配置路由
const router = new VueRouter({
routers : [
{path:’/’,component:Home} //要路由的地址
{path:’/helloword’,component:HelloWorld} //要路由的地址
]
}

4、引入对应的页面
到此为止，这个路由并不能正确的使用，因为他无法识别 Home 和 HelloWorld
因此我们在 main.js 中引入这两个页面（这两个都是写好的vue页面）
import HelloWorld from './components/HelloWorld’
import Home from './components/Home’

5、给vue实例添加router属性
new Vue({
router,
template:’’,
components:{App}
})’
这时，就将路由绑定在组件上了
但是没有地方让他显示，因此我们在App.vue中加入

6、去调用地址栏的#号

现在我们通过路由跳转的时候，地址栏有个#号，它会影响到我们的跳转
给他新增一个属性 mode:"history"

这时候，我们去掉#号也可以在地址栏正常的跳转了。

7、自己实现导航
在App.vue中我们新增一个ul列表，里面包含着a标签，href分别是我们之前定义的两个路由
注意：url中的路由名称一定要和定义的路由严格一致

这个时候点击li，就会跳到对应的页面上
但是，有个问题，用a标签跳转时，页面刷新了，这就不符合路由的特点（提高工程的运行速度）
因此，不能用a标签，将a标签替换成vue的路由，

这时，我们的路由就完全实现了

vue-Http

1、第一步，先下载安装模块
npm install vue-resource --save-dev 回车

2、第二步，在main.js中引入vue-resource

然后在下面引用一下，Vue.use(VueResource)
这样我们就可以在任何一个组件中使用http组件了

3、第三步，使用我们的http请求
这个使用就需要使用到一个网站 jsonplaceholder.typicode.com
这个网站提供了我们很多请求数据的接口
那么开始使用http，我们要在页面加载之前获取数据，也就是created阶段

我们通过 this.$http.get(url) 进行请求
请求成功后，他会调用 .then 方法，在这里我们可以对获取到的数据进行处理
将请求到的值赋给data