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

<think>好的,用户正在寻找Vue3的进阶学习资料或教程,特别是高级用法、教程、学习指南和最佳实践。我需要根据提供的引用内容来整理回答。 首先,查看用户提供的引用内容。引用[1]提到从基础到核心概念和高级特性,强调实践的重要性,并询问是否有具体内容需要深入了解。这可能适合推荐系统学习路径。引用[2]讨论了Vue3中处理异步函数的最佳实践,包括Composition API、状态管理、竞态条件和错误处理。引用[3]解释了Vue的生命周期钩子,这也是进阶内容的一部分。引用[4]提到了模块化管理和动态加载语言包的最佳实践,可能与国际化和性能优化相关。 接下来,我需要将这些引用内容整合成一个结构清晰的回答。用户需要的是进阶资料,所以应该覆盖高级特性、性能优化、状态管理、组合式函数、SSR、TypeScript集成、测试和最佳实践等方面。同时,要结合引用中的具体建议,比如动态加载语言包、Composition API的使用等。 需要确保每个部分都引用相关的引用来源,比如在异步函数处理部分引用[2],在模块化管理部分引用[4]。此外,可能还需要补充一些常见的进阶主题,如自定义渲染器或响应式原理,但如果没有引用支持,可能不提及。 然后,生成相关问题,这些问题应基于回答中的内容,帮助用户进一步探索。例如,关于Composition API的优势、性能优化方法、状态管理对比等。 最后,检查回答是否符合格式要求:使用正确的中文,数学公式用$...$,独立公式用$$...$$,但这里可能不需要数学公式。确认所有引用标识正确添加,如[^1]、[^2]等,并且没有使用markdown格式。</think>### Vue3 进阶学习指南与最佳实践 #### 一、核心进阶知识体系 1. **Composition API 深度应用** - 使用 `setup()` 实现逻辑复用,替代 Options API 的碎片化代码结构 - 自定义组合式函数封装业务逻辑(如 `useFetch` 数据请求封装) - 响应式进阶:`shallowRef`/`markRaw` 优化性能,`customRef` 创建定制响应对象 2. **状态管理进阶方案** ```typescript // Pinia 状态模块示例 export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }) ``` - 大型项目推荐使用 Pinia 替代 Vuex,支持 TypeScript 和组合式API 3. **性能优化策略** - 组件懒加载:`defineAsyncComponent` 实现按需加载 - 列表渲染优化:`v-for` 配合 `key` 与虚拟滚动技术 - 动态语言包加载(引用[4]示例): ```javascript const loadLanguage = async (locale) => { const messages = await import(`./languages/${locale}.ts`) i18n.global.setLocaleMessage(locale, messages.default) } ``` #### 、关键实践领域 1. **异步处理规范** - 使用 `Suspense` 组件管理异步依赖 - 竞态条件处理:通过 `AbortController` 取消过期请求 - 错误处理标准化: ```javascript const { data, error } = await handlePromise(fetchData()) ``` 2. **渲染机制进阶** - 自定义渲染器开发(如 Canvas 渲染) - 服务端渲染(SSR)与静态站点生成(SSG)集成 - 响应式原理剖析:依赖收集与触发机制 #### 三、推荐学习路径 1. **官方进阶文档** - [Vue3 Composition API 手册](https://vuejs.org/guide/extras/composition-api-faq.html) - [渲染函数 & JSX](https://vuejs.org/guide/extras/render-function.html) 2. **工程化实践** - 使用 `<script setup>` 语法糖简化代码 - 基于 Vite 的插件开发与性能调优 - TypeScript 深度集成模式: ```typescript interface User { id: number name: string } const user = ref<User>() ``` 3. **测试体系构建** - 组件测试:Vitest + Testing Library - E2E 测试:Cypress 集成实践
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值