一、路由简单四步走
通俗地说：路由是输入不同网址打开，显示不同内容 （即不同网址就是不同的路由）
专业地说：访问不同的路由，加载不同的组件
1､安装
npm install --save vue-router // 一定要在项目文件夹下安装
2､引用
import router from 'vue-router' //在入口文件main.js中引入，也可以是哪个文件用到，哪个文件引入
Vue.use(router)
此处一坑：router的引用，切记不能用npm 安装自带的 import router from './router'，会报错
image.png
要换成 import router from 'vue-router' 即可
3､配置路由文件，并在 vue 实例中注入
var rt = new router({//配置路由
routes:[{
path:'/', //指定要跳转的路径
components:HelloWorld //指定要跳转的组件
}]
})
new Vue({//在 vue 实例中注入
el: '#app',
router:router,
components: {App},
template: '<App/>'
})
4､确定视图要加载的位置
<router-view></router-view> // 定义的是path对应的组件渲染的位置
二、路由的跳转
<router-link to="/"></router-link>
<template>
<ul>
<li>
<router-link to="/helloworld">HELLO WORLD</router-link>
</li>
<li>
<router-link to="/helloearth">HELLO EARTH</router-link>
</li>
</ul>
</template>
三、vue-router路由参数的传递
1､必须在路由内加入路由的name
2､必须在path后加上 /: 和 传递的参数
export default new Router({
routes: [
{
path: '/helloworld/:worldmsg', //在path后加上 /: 和 传递的参数
name: 'helloworld', //加入路由的name
component: HelloWorld
},
{
path: '/helloearth/:earthmsg',
name: 'helloearth',
component: HelloEarth
}
]
})
3､传递参数
<router-link :to="{name: helloearth,params:{msg:'你我她'}}">Hello Earth</router-link>// to前面 切记加冒号（:）
4､接收参数（往哪个组件跳转，就是哪个组件接收）
$route.params.msg // msg是要传递的参数
//形式：..../helloworld/你好世界
<template>
<div class="hello">
<h1>Hello World</h1>
<h2>Essential Links</h2>
<h3>{{$route.params.msg}}</h3>
<hr>
</div>
</template>
四、Axios中的get请求
1､axios定义
一个基于Promise 用于浏览器和nodejs 的 HTTP 客户端 ,它本身具有以下特征：
a、从浏览器中创建 XMLHttpRequest
b、从nodejs 发出 http 请求
c、支持Promise API
d、拦截请求和响应
e、转换请求和响应数据
f、取消请求
g、自动转换JSON数据
h、客户端支持防止 CSRF/ XSRF
2､axios 四步走
a、安装
npm install axios
b、引入加载
import axios from 'axios'
c、将axios 全局挂载到 VUE 原型上
Vue.prototype.$http= axios //$http名字随意
d、发出请求，以cnode社区API 为例
// 为给定的id 的 user 创建请求
getData(){//使用传统的function
var self = this
this.$http.get('https://cnodejs.org/api/v1/topics')
.then(function(res){//此处的this 指向的不是当前vue 实例
self.items = res.data.data
console.log(res.data.data)
})
.catch(function(err){
console.log(err)
})
}
getData(){//使用es6
this.$http.get('https://cnodejs.org/api/v1/topics') //请求
.then(res =>{
self.items = res.data.data
console.log(res.data.data)
})
.catch(err =>{
console.log(err)
})
}
小总结：Get 请求有三种方式：
a、没参数时，直接通过url
axios.get('https://cnodejs.org/api/v1/topics')
b、有参数时，两种传递参数形式
axios.get('https://cnodejs.org/api/v1/topics', {
params: {//params 里面可以接多个对象
id: 12345
}
})
//当前页码是第一页，且每页显示15
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15', {
id: 12345 //如果只有一个params,没有其他参数，可以这么简写
})
五、Axios中的post请求
postData(){ //在axios中，post请求接收的参数必须是form.data
this.$http.post(url,qs.stringify({//所以这里用到 qs插件，用qs.stringify转换即可
page:1,
limit:20
})).then(res =>{
this.items = res.data.data //此处this指向的不是当前vue实例
console.log(res)
})
.catch(err =>{
console.log(err)
})
}
小总结：POST传递数据有两种格式：
a、form.data ?page=1&limit=48
b、x.www.form.urlencoded { page: 1,limit: 10 }
特别注意：
在axios中，post请求接收的参数必须是formdata ，此时用到qs插件中的qs.stringify转换即可
网友评论