11.1 vue-router路由基本加载
简单四步走
- 安装
npm install --save vue-router
- 引用
import router from 'vue-router'
Vue.use(router)
- 配置路由文件,并在vue实例中注入
var rt = new router({
routes: [{
path: '/hello',//指定要跳转的路径
component: HelloWorld//指定要跳转的组件
}]
})
new Vue({
el: '#app',
router: rt,
components: { App },
template: '<App/>'
})
- 确定视图加载的位置
<router-view></router-view>
11.2 vue-router路由的跳转
<router-link to="/"></router-link>
<template>
<ul>
<li>
<router-link to="/helloWorld">helloWorld</router-link>
</li>
<li>
<router-link to="/helloEarth">helloEarth</router-link>
</li>
</ul>
</template>
11.3 vue-router路由参数的传递
- 必须在路由内加入路由的name
- 必须在path后加/: +传递的参数
- 传递参数和接收参数看下边代码
<router-link :to="{name:'helloWorld', params:{worldMsg:'只有一个世界'}}">
helloWorld
</router-link>
读取参数:{{$route.params.worldMsg}}
方式:===/helloworld/你好世界
<router-link:to="{path: '/helloearth',query:{msg: 只有一个地球}}">
HELLO WORLD
</router-link>
方式:===/helloworld?name=XX&count=xxx
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({
query: route.query.q }) }
]
})
11.3.1 Axios之get请求详解
axios的简介:
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
- 安装
npm install axios
- 引入加载
import axios from 'axios'
- 将axios全局挂载到VUE原型上
Vue.prototype.$http = axios;
- 发出请求 以cnode社区API为例子
// 为给定 ID 的 user 创建请求
getData:function(){
var self = this
this.$http.get('https://cnodejs.org/api/v1/topics',{
params: {
page: 1,
limit: 15
}
})
.then(function(res){
self.items = res.data.data
console.log(res.data.data)
})
.catch(function(err){
console.log(err)
})
}
// 可选地,上面的请求可以这样做
两种传递参数的形式
axios.get('/user', {
params: {
ID: 12345
}
})
axios.get('/user', {
ID: 12345
})
---------------------------------------------
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')
使用CNODE社区官方的API为例展开学习
获取主题列表API:https://cnodejs.org/api/v1/topics
参数:page页码
limit 每页显示的数量
11.3.1 Axios之post请求详解
postData:function(){
var self = this
this.$http.post(url,qs.stringify({
page: 1,
limit: 20
}))
.then(function(res){
self.items = res.data.data
console.log(res.data.data)
})
.catch(function(err){
console.log(err)
})
}
POST传递数据有两种格式:
- formdata ?page=1&limit=48
- xwwwformurlencoded { page: 1,limit: 10 }
在axios中,post请求接收的参数必须是form-data
qs插件—qs.stringify
网友评论