vue 组件解析

最新推荐文章于 2025-02-14 16:29:03 发布

柒F12

最新推荐文章于 2025-02-14 16:29:03 发布

阅读量198

点赞数

分类专栏：前台文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_36144386/article/details/118407797

版权

前台专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Vue中组件的注册与使用，如何通过`$axios`进行Ajax请求，包括方法别名和常见HTTP方法的用法。同时，讲解了`$router`的`push`和`replace`方法在页面跳转中的应用。

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

1. components -- 注册组件。

在components中注册BlogHeader组件，在template中就可直接使用

<template>

  <div>
    <blog-header></blog-header>
    <hr/>
    <div>
      用户名：<input type="text" v-model="loginInfoVo.username" placeholder="请输入用户名" />
      <br/>
      密码：<input type="password" v-model="loginInfoVo.password" placeholder="请输入密码" />
      <br/>
      <button v-on:click="login">登录</button>
    </div>
    <br/>
    <blog-footer></blog-footer>
  </div>
</template>
<script>
import BlogHeader from '@/view/BlogHeader.vue'
import BlogFooter from '@/view/BlogFooter.vue'

export default {
  name:"BlogLogin",
  // 注册组件
  components:{BlogHeader,BlogFooter},

}
</script>

===================================================

2. $axios

代码入下：

methods:{

/* login(){

      this.$axios.post().then().catch()

    }

*/

login(){

      this.$axios.post('/login',{

        username:this.LoginInfoVo.username,

        password:this.LoginInfoVo.password

      }).then(successResponse =>{

        this.responseResult = JSON.stringify(successResponse.data)

        if(successResponse.data.code === 200){

          this.$router.replace({path:'/index'})

        }

      }).catch()

    }

  }

使用$asios 完成 ajax请求。

请求方法的别名

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

NOTE

在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

方法

.post() -- 后台方法路径与传参

.then() -- 方法返回值，及后续操作

.catch() -- then方法里有错误代码会走catch里

3. $router

this.$router.push

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数

// 字符串
this.$router.push('index') 

// 对象
this.$router.push({path: 'login-pw'})

// 带参数
this.$router.push({path: 'login-pw', query: {'account': this.account.account}})

// 跳转后的页面获取参数
this.account.account = this.$route.query.account