1:两个页面之间传递参数
(1)获取?拼接来的参数
{{$route.query.goodsId}}
(2)两个视图页面之间跳转问号传递参数
// 传递参数的页面
this.$router.push({
path:'/note/NoteEdit', // router/index.js 文件中配置的 path 值
name:'', //router/index.js 文件中配置的 name 值
params: {
noteContent:'跑步',
noteTime:'2018年4月16日'
}
})
// 接收参数的页面
this.$route.params.noteContent; //'跑步'
this.$route.params.noteTime; //'2018年4月16日'
(3)组件之间获取参数 {{KaTeX parse error: Expected 'EOF', got '}' at position 18: …ute.params.name}̲} (4)向前向后 …router.go(-2)
2:页面间跳转的三种方式
(1)router-link跳转
<router-link to="/cart">去购物车页面</router-link>
(2) js编程跳转 =》
<button @click="jump">button - js编程跳转到购物车页面</button>
methods: {
jump () {
this.$router.push({path: 'cart?goodsId=123'})
}
}
(3)命名路由跳转(根据路由的name值)=》
//params 是路由的参数
<router-link v-bind:to="{name:'cart',params:{cartId:123}}">命名路由跳转去购物车页面</router-link>
//cart 的路由
{
path: '/cart/:cartId',
name: 'cart',
component: Cart
}
3:配置子组件
import Title from './../views/Title.vue'
import Image from './../views/Image.vue'
{
path: '/goods',
name: 'goodsList',
component: goodsList,
children: [
{
path: 'Title',
name: 'title',
component: Title
}, {
path: 'Image',
name: 'image',
component: Image
}
]
}
4:命名视图(主播说不怎么用的到)
//App.vue中
<router-view class="main"></router-view>
<router-view class="left" name="title"></router-view>
<router-view class="right" name="img"></router-view>
//路由配置中
{
path: '/',
name: 'index',
components: {
default: goodsList,
title: Title,
img: Image
}
}
5:vue-resource
(1)安装
方法一:cdn引入
`
`
方法二:npm安装依赖
npm install vue-resoure --save
(–save是安装到开发依赖中,devDependencies,即开发中使用的依赖,
dependencies是项目上线之后仍然要使用的依赖)
(2)vue-resource 提供的7种请求API
(3)vue-resource 提供的参数
(4)get请求写法
<div id = "app">
<h1>vue-resource插件讲解</h1>
<a
href="javascript:;"
class="btn btn-primary"
@click="get">Get请求</a>
<span>{{msg}}</span>
</div>
new Vue({
el:'#app',
data:{
msg:''
},
methods:{
get:function(){
this.$http.get("package.json", {
params: {
userId: "101"
},
headers: {
token: "abcd"
}
}).then(res=>{
this.msg = res.data;
},error=>{
this.msg = error;
});
},
}
})
(5)POST请求
<div id = "app" class="container" >
<a
href="javascript:;"
class="btn btn-primary"
@click="post">POST请求</a>
<span>{{msg}}</span>
</div>
new Vue({
el:'#app',
data:{
msg:''
},
methods:{
post: function(){
this.$http.post("package.json", {
userId: "102"
},{
headers:{
access_token: "pppppost"
}
}).then(res=>{
this.msg = res.data;
},error=>{
this.msg = error;
});
}
}
})
(5)JSPON请求
6:axios使用
(1)安装
//安装axios
cnpm i axios -S
//它的作用是能把json格式的直接转成data所需的格式
cnpm i qs.js -S
(2)配置