vue进阶学习( 二 )

这篇博客深入探讨了Vue.js的进阶话题,包括两个页面之间的参数传递方法,如视图间、组件间的参数交互,以及页面跳转的三种策略,如router-link、编程式跳转和命名路由。还介绍了配置子组件的基础知识。在HTTP库方面,讲解了vue-resource的安装与使用,包括不同类型的请求API,以及axios的安装与基本配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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)配置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值