vue进阶学习（二 )

最新推荐文章于 2025-07-01 10:37:12 发布

原创最新推荐文章于 2025-07-01 10:37:12 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

6 篇文章

订阅专栏

这篇博客深入探讨了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: \dotsute.params.name}̲} （4）向前向后 \dots$ 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）配置