Vue3-组件、合成API、路由(第二篇)

已于 2022-07-17 17:45:04 修改
阅读量1.1k 收藏 3
点赞数 1
分类专栏： vue学习 文章标签： vue.js javascript 前端 vue-cli3
于 2021-12-22 18:31:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43547255/article/details/121970948
版权

Vue3-组件使用–路由(第二篇)

一、组件的使用
1.引用组件

1.新建一个组件命名为Header.vue
Header.vue

<template>
   <h1>这是头部组件</h1>
</template>

2.在App.vue中引用

在这里插入图片描述运行一下
在这里插入图片描述

2、将父组件的内容传递给子组件

传递变量
在这里插入图片描述在这里插入图片描述

3.将子组件的内容传递父组件

在这里插入图片描述

在这里插入图片描述

二、声明周期函数
<template>
  <div class="content">
  </div>
</template>
<script>
//声明式
export default {
  name: 'App',
  data(){
    return{
      }
    }
  ,
 beforeCreate(){
   console.log("初始化数据之前")
 },
 created(){
   console.log("数据初始化之后")
 },
 beforeMount(){
   console.log("挂载渲染之前")
 },
 mounted(){
   console.log("挂载渲染之后")
 },
 beforeUpdate(){
   console.log("更新之前")
 },
 updated(){
   console.log("更新之后")
 },
 beforeUnmount(){
   console.log("销毁之前")
 },
 unmount(){
   console.log("销毁之后")
 }
}
</script>
三、合成API
1.合成API初体验

setup()
这是使用composition-Api的入口;
可以接受两个参数:setup(props, context)
props:接受父组件传来的参数;
context:(执行上下文)
使用ref声明函数，才是可变的
使用函数必须从setup里return出去

<template>
  <div class="content">
    <h1 @click="changeNum">{{num}}</h1>
    <h2>姓名:{{user.username}}</h2>
    <h2>年龄:{{user.age}}</h2>
    <h1>{{username}}</h1>
    <h3>{{reverseType}}</h3>
  </div>
</template>
<script>
//声明式
import {ref,reactive,toRefs,computed,watch,watchEffect} from 'vue'
//导入ref reacive toRef函数
export default {
  name: 'App',
  setup(){
    //数值
    //使一个值或者字符串变成响应式
    const num = ref(0);
    //对象
    //使一个对象变成响应式
    const user = reactive({
      username : "可可",
      age:18,
      type:"爱动",
      reverseType:computed(()=>{
        return user.type.split('').reverse().join('')
      })
    })
    //方法
    function changeNum(){
      num.value += 10;
    }
    function changeType(){
      user.type = "超级爱动"
    }
    watchEffect(()=>{
      //会判断里面的内容要监听的函数
      console.log(user.type)
      console.log("user.type改变")
    })
    watch([num,user],(newnum,prevNum)=>{
      console.log(newnum,prevNum);
      console.log("当num改变的时候，会触发执行函数")
    })
    //将变量方法返回
    return {num,changeNum,user,...toRefs(user),changeType}
  }
</script>
2.合成api详解
<template>
  <div class="content">
    <user :username="username" :age="age"/>
  </div>
</template>
<script>
//声明式
import user from './components/user.vue'
import {ref,reactive,toRefs,computed,watch,watchEffect} from 'vue'
//导入ref reacive toRef函数
export default {
  name: 'App',
  components:{
    user
    },
  setup(){
    //数值
    //使一个值或者字符串变成响应式
    const num = ref(0);
    //对象
    //使一个对象变成响应式
    const user = reactive({
      username : "可可",
      age:18,
      type:"爱动",
      reverseType:computed(()=>{
        return user.type.split('').reverse().join('')
      })
    })
    //方法
    function changeNum(){
      num.value += 10;
    }
    function changeType(){
      user.type = "超级爱动"
    }
    watchEffect(()=>{
      //会判断里面的内容要监听的函数
      console.log(user.type)
      console.log("user.type改变")
    })
    watch([num,user],(newnum,prevNum)=>{
      console.log(newnum,prevNum);
      console.log("当num改变的时候，会触发执行函数")
    })
    //将变量方法返回
    return {num,changeNum,user,...toRefs(user),changeType}
  }
</script>

user.vue

<template>
    <div>
        <!-- 从父组件传递给子组件参数 -->
        <h1>username:{{username}}</h1>
        <h1>age:{{age}}</h1>
        <h3>{{description}}</h3>
    </div>
</template>
<script>
import {ref,reactive,toRefs,computed,watch,watchEffect} from 'vue'
export default {
    props:['age','username'],
    //content可以获取从父元素传递过来的数据比如class属性值
    setup(props,content){
        console.log(props);
        //由于setup执行在前面，this指针还未加载，所以在这不能用this传值
        const description = ref(props.username+"年龄是"+props.age);
        return {
            description
        }
    }
}
</script>
3.setup中使用生命周期函数

user.vue

<template>
    <div>
        <!-- 从父组件传递给子组件参数 -->
        <h1>username:{{username}}</h1>
        <h1>age:{{age}}</h1>
        <h3>{{description}}</h3>
    </div>
</template>
<script>
import {ref,reactive,toRefs,computed,watch,watchEffect,onBeforeMount,onMounted,onBeforeUpdate,onBeforeUnmount,onUnmounted} from 'vue'
export default {
    props:['age','username'],
    //content可以获取从父元素传递过来的数据比如class属性值
    setup(props,content){
        console.log(props);
        //由于setup执行在前面，this指针还未加载，所以在这不能用this传值
        const description = ref(props.username+"年龄是"+props.age);
        //可以多次触发，如果需要生命周期就把它们导入进来，前面多加一个on
        onBeforeMount(()=>{
            console.log("onBeforeMount")
        })
        onBeforeMount(()=>{
            console.log("onBeforeMount")
        })
        return {
            description
        }
    }
}
</script>
4、利用provide从父组件传值给子组件
<template>
  <div class="content">
    <student/>
  </div>
</template>
<script>
//声明式
import student from './components/student.vue'
import {ref,reactive,toRefs,computed,watch,watchEffect,provide} from 'vue'
//导入ref reacive toRef函数
export default {
  name: 'App',
  components:{
    student
    },
  setup(){
    const student = reactive({
      name:"小可",
      classname:"三年二班"
    })
    //提供的名称，提供的内容
    provide('student',student);
    return {}
  }
}
</script>

student.vue

<template>
    <div>
        <h1>学生：{{name}}</h1>
        <h1>年龄：{{classname}}</h1>
    </div>
</template>
<script>
import {ref,reactive,toRefs,computed,watch,watchEffect,provide,inject} from 'vue'
//获取提供的内容，需要注入函数inject
export default {
    setup(props,content){
        const student = inject('student')
        return{
            ...student
        }
    }
}
</script>

在这里插入图片描述

四、路由
1.路由的基本概念

路由中有三个基本的概念route,routes,router.

// route 它是一条路由,就是一个路径和组件的映射关
{     
    path:'/',         
    component: Home
}

//routes 
是一组路由，把每条route的路由组合起来，形成一个数组。
routes:[     
    {         
        path:'/',         
        component: Home     
    },     
    {         
        path:'/list',         
        component: List     
    } 
]

/*router 是一个路由机制，相当于一个管理者，
他来管理路由。因为routes只是定义了一组路由，
也就是一组路径和组件的对应关系,当用户点击了按
钮,改变一个路径,router会更加路径处理不同组件
*/
var router = new VueRouter({     
    // 配置路由     
    routes:[...] 
})
2.安装路由

终端中输入

npm install vue-router@next

Vue3 路由用法官网
在这里插入图片描述

router 下的index.js

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
 
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
 
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

main.js

在这里插入图片描述
运行一下

npm run dev

在这里插入图片描述

router-link组件说明:

/*
    router-link是vue-router已经注册好的组件,直接使用就可以了
    router-link是用来切换路由的,通过to属性来跳转到指定的路由
    router-link在编译的时候会自动被编译为a标签,可以使用tag属性指定编译为你要的标签
*/

router-view组件说明:

/*
    router-view用来指定当前路由所映射的组件显示的位置
    router-view可以理解为占位符,为路由映射的组件占位,不同路由映射的组件通过替换显示
    和动态组件的效果类似
*/
3.动态路由和404NotFound

引入：不同用户登录一个界面， 我们会发现网址中有一部分相同，但是涉及到个人id值却是不同的。这就表示，它是一个组件，假设是user组件。不同的用户（就是用户的id不同），它都会导航到同一个user 组件中。这样我们在配置路由的时候，就不能写死, 所以就引入了动态路由。

path:'/students/:id',component:students

ps:

访问`/students/101`和`/students/102`的时候都能匹配到同一个路由,走同一个路由处理函数, 咱们就得定义/students/:id的路由

router 下的index.js

import {createRouter,createWebHashHistory} from 'vue-router'
import News from '../src/components/News.vue'
import Notfound from '../src/components/Notfound.vue'
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path:'/News/:id',component:News},
  {path:'/:path(.*)',component:Notfound
//设置路径名，组件名
}
]
const router = createRouter({
  history: createWebHashHistory(),
  routes, 
})
export default router;

Notfound.vue

<template>
    <div>
        <p>404 not found page</p>
    </div>
</template>

import {createRouter,createWebHashHistory} from 'vue-router'
import News from '../src/components/News.vue'
import Notfound from '../src/components/Notfound.vue'
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path:'/News/:id',component:News},
  { path:'/News/:id(//d+)',component:News},
  { path:'/News/:id+',component:News},/* +至少有一个·
  ?有或者没有，不可以重复
  *有和没有都可以*/
 { path:'/News/:id*',component:News},
  {path:'/:path(.*)',component:Notfound}
]
 
const router = createRouter({
  history: createWebHashHistory(),
  routes, 
})
export default router;
4.嵌套路由

router 下的index.js

import { createRouter, createWebHashHistory } from "vue-router";
import User from "../src/components/User.vue";
import hengban from "../src/components/hengban.vue";
import shuban from "../src/components/shuban.vue";
const Home = { template: "<div>Home</div>" };
const About = { template: "<div>About</div>" };
const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
  { path: "/user",
   component: User,
  children:[
    {
      path:'hengban',
      component:hengban
    },{
      path:'shuban',
      component:shuban
    }
  ]
  }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;

在这里插入图片描述

利用req.params.id来获取路由的不同部分的数据
router 下的index.js

import { createRouter, createWebHashHistory } from "vue-router";
import User from "../src/components/User.vue";
import hengban from "../src/components/hengban.vue";
import shuban from "../src/components/shuban.vue";
const Home = { template: "<div>Home</div>" };
const About = { template: "<div>About</div>" };
const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
  { path: "/user/:id",
   component: User}
];
const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;

user.vue

<template>
    <div>
        <h1>User页面</h1>
        <h2>{{$route.params.id}}</h2>
          <router-view></router-view>
    </div>
</template>
5.使用js跳转页面

$router.push()
page.vue

<template>
    <div>
        <button @click="toindexpage">跳转到首页</button>
    </div>
</template>
<script>
export default {
    methods:{
        toindexpage(){
            console.log("跳转到about页面")
            this.$router.push({path:'/about'})
//this.$router.push({path:'/mypage/123'})
//携带参数
//this.$router.push({name:"mypage",params:{id:132}})
        }
    }
}
</script>

router 下的index.js

import { createRouter, createWebHashHistory } from "vue-router";
import User from "../src/components/User.vue";
import page from "../src/components/page.vue";
const Home = { template: "<div>Home</div>" };
const About = { template: "<div>About</div>" };
const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
  {path:'/page/:id',
  name:'mypage',//别名
component:page}
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;

也可以携带参数跳转

在这里插入图片描述
$router.replace()

  this.$router.replace({path:'/page',query:{search:"可可"}})

$router.go(-1)返回上一个页面

$router.go(-1)

$router.go(1)前进到下一个页面

$router.go(1)

代码

<template>
    <div>
        <button @click="toindexpage">跳转到首页</button>
        <button @click="replacePage">替换页面</button>
        <button @click="$router.go(1)">前进</button>
        <button @click="$router.go(-1)">后退</button>
    </div>
</template>
<script>
export default {
    methods:{
        toindexpage(){
            console.log("跳转到about页面")
         this.$router.push({path:'/mypage'})
        },
         replacePage(){
             console.log("替换页面")
             //回不到刚才的页面
          this.$router.replace({path:'/page',query:{search:"可可"}})
         }
    }
}
</script>
6.命名视图

一个页面中可以·设置多个组件进行渲染

import { createRouter, createWebHashHistory } from "vue-router";
import shop from '../src/components/shop.vue'
import shopfoot from '../src/components/shopfoot.vue'
import shopTop from '../src/components/shopTop.vue'
const Home = { template: "<div>Home</div>" };
const About = { template: "<div>About</div>" };
const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
  {path:'/shop',
   components:{
     default:shop,//默认值页面是shop
     shopfoot:shopfoot,
     shopTop:shopTop
   }
}
];
const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;


<template>
  <div class="content">
    <router-view></router-view>
    <router-view name="shopTop"></router-view>
    <router-view name="shopfoot"></router-view>
    <!-- 如果遇见名字相同的，会把内容更新到路由上 -->
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  setup() {
    return {};
  }
};
</script>
7.重定向和别名
{path:'/mall',
    redirect:(to)=>{return{path:'/shop'}}
  }//重定向跳转到shop页面

  //别名，取别名地址栏中的名字不会改成shop，依旧是cocoshop，可以取多个别名
  alias:"/cocoshop",
8.导航守卫

如果有权限那么可以实现跳转页面

router.beforeEach((to,from)=>{
  return false;//返回为false没有权限，页面无显示
})

router.beforeEach((to,from,next)=>{
  console.log(to)
  next();//如果想要继续访问使用next()调用起来
})

import { createRouter, createWebHashHistory } from "vue-router";
import shop from '../src/components/shop.vue'
import shopfoot from '../src/components/shopfoot.vue'
import shopTop from '../src/components/shopTop.vue'
import mypage from '../src/components/mypage.vue'
const Home = { template: "<div>Home</div>" };
const About = { template: "<div>About</div>" };
const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
  {path:'/shop',
  //别名，取别名地址栏中的名字不会改成shop，依旧是cocoshop，可以取多个别名
  alias:"/cocoshop",
   components:{
     default:shop,//默认值页面是shop
     shopfoot:shopfoot,
     shopTop:shopTop
   },
   //具体的进入某一个组件页面
     beforeEnter:(to,from)=>{
    console.log("beforeEnter")
    //只会进入page页面才会产生经常会用到
  }
},
  //   {path:'/mall',
  //   redirect:(to)=>{return{path:'/shop'}}
  // },
  {path:'/mypage',
  component:mypage
 }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});
//跳转之前执行
router.beforeEach((to,from,next)=>{
  console.log(to)
  next();
  //如果return false)有没有权利跳转到某一个页面,取消跳转
  //安全导航
})
export default router;

使用选项API

  beforeRouteEnter(){
        console.log("路由进入")
    },
    beforeRouteUpdate(){
        console.log("路由更新组件")
    },
    beforeRouteLeave(){
        console.log("路由离开组件")
    }

<template>
    <div>
        <h1>购物商城</h1>
        <button @click="topage"></button>
    </div>
</template>
<script>
export default {
    methods:{
        topage:function(){
            this.$router.push({path:'/mypage'})
        }
    },
    beforeRouteEnter(){
        console.log("路由进入")
    },
    beforeRouteUpdate(){
        console.log("路由更新组件")
    },
    beforeRouteLeave(){
        console.log("路由离开组件")
    }
}
</script>
9.路由模式

路由的实现有两种方案,一种是通过hash值,一种是通过H5 的history.但是Vue路由默认使用hash模式.
在这里插入图片描述

//hash路由中#看起来多多少少有点别扭.我们就像使用//history模式,那要怎么设置呢

VueRouter配置项中处理提供一个routes用来配置路由映射表,还提供了一个mode选项用来配置路由模式

import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
  history: createWebHashHistory(),
  routes
});

在这里插入图片描述

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

在这里插入图片描述

在这里插入图片描述

可可鸭~
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-router API(v3.x.x)
RainGirl_的博客
04-21 507
1, Vue-router为Vue环境添加两个全局组件：RouterView(函数组件)和RouterLink；
一篇文章弄懂vue3常用API
蛋蛋老公的博客
12-31 3923
1、使用vite创建项目 npm init @vitejs/app vue3-vite-demo 2、建立路由router 打开文件，建立router路由文件，建立index.js文件 import { createRouter, createWebHashHistory } from "vue-router"; import globalRoutes from "./globalRoutes"; import mainRoutes from "./mainRoutes"; const router
vue-hot-reload-api:HotVue组件的热重载API
05-02
vue-hot-reload-api 注意： vue-hot-reload-api@2.x仅适用于vue@2.x Vue组件的热重装API。 这就是和在引擎盖下使用的东西。 用法 仅当您基于Vue组件编写一些构建工具链时，才使用此功能。 对于正常的应用程序使用，只需使用vue-loader或vueify 。 // define a component as an options object const myComponentOptions = { data ( ) { ... } , created ( ) { ... } , render ( ) { ... } } // assuming Webpack's HMR API. // https://webpack.js.org/guides/hot-module-replacement/ if ( module .
vue3 常用的api总结
qq_42907330的博客
12-08 1658
创建vue3项目 1.首先把vue-cli更新到4.5版本 npm i -g @vue/cli 2.vue create xxxx 1.路由 (1).路由需要安装Vue Router 4.0 npm install vue-router@next (2).创建路由文件router/index.js (3)去main.js挂载上路由 2.生命周期 3.globalProperties 4.vuex 安装vuex npm install vuex@next --save 创建store/index
【Vue3】什么是路由？Vue中的路由基本切换~
最新发布
null18的博客
03-12 1139
网络的角度：网络中的路由：在网络中，路由是指确定数据包从源到目的地的路径的过程。路由器是负责执行这一过程的设备，它们根据网络中的路由表来选择最佳路径将数据包传输到目的地。网络中的路由是指网络数据包的传输路径选择Vue3的角度：在Vue.js中，路由是指管理应用程序中不同页面之间导航的方式。Vue Router是Vue.js官方提供的路由管理器，它允许您在单页应用程序（SPA）中定义路由，然后根据用户的操作在不同的页面之间进行切换。Vue中的路由是指前端应用程序中页面之间的导航管理。
Vue组合式API--路由的使用详解
qq_44749491的博客
10-07 3799
Vue3中路由的使用
Vue3.0组合式API（二）-----前端路由
chucksun0426的博客
10-10 1208
一、App.vue文件 1.1默认表现形式 原文件： <template> <div id="app"> // main.js中的挂载点#app // 标签行，相当于a标签，点"首页"会跳转到"/"路由相对应的组件，默认会自动跳转/路由（index.js） <router-link to="/">首页</router-link> <router-link to="/shopping">购物车&lt
vue3-treeselect:vue 3的树选择组件（下一个）
04-13
vue3树选择 具有嵌套选项的多选组件支持 。感谢及其源代码和库，以此作为vue 2的基础。 从他的资料库中取得重大变化： 属性value => modelValue 事件input => updated:modelValue 现在将插槽与特征带有嵌套选项的...
vuepress-theme-api:V VuePress的API友好主题
05-13
vuepress-theme-api :package: :memo: :artist_palette: VuePress的API友好主题。 受时代启发。建于 先决条件您需要设置一些全局依赖项。 入门正在安装 # Install VuePressyarn add vuepress # OR npm install vue...
vue脚手架,vue3 组件 vue-property-decorator 组件
09-11
vue脚手架 本框架已开发了所属相关组件，如有 定制组件 需求可联系
vue3-router-tree:表示路由结构的树
05-29
Vue 3 路由器树此组件基于Vue.js 3 ，它将您的路由或项目表示为树视图，默认情况下将路由配置作为项目，但您可以提供遵循以下格式的自定义项目： [ { path : '/somePath' , //optional name : 'someName' , //...
Vue3-37-路由-组件内的路由守卫 onBeforeRouteLeave 和 onBeforeRouteUpdate
northcastle的博客
01-05 3174
vue3 中的组件内的路由守卫的 组合式API ，onBeforeRouteLeave 和 onBeforeRouteUpdate 的基本使用演示
vue3 路由的使用
热门推荐
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
Vue——vue3路由搭建
qq_43201350的博客
10-08 811
Vue——vue3路由搭建
【Vue3】 Vue-Router路由和路由导航守卫
weixin_44899940的博客
08-22 4846
Vue-Router路由，编程式导航，动态路由，路由导航守卫
关于vue-router路径配置的问题（此文主要是记录三级路由的访问路径，以及安装、路由组件、路由重定向）
qq_56715703的博客
03-09 3490
node路由：用户根据不同的url地址，来访问不同的页面vue路由（客户端）：组件结合路由规则来构建单页面应用。
vue3创建项目（二）router路由配置和使用
zhangxueyou2223的博客
09-26 1214
vue3创建项目（二）router路由配置和使用
vue3中在本地注册组件+router的简单使用
暮色年华的博客
08-11 359
本地注册组件
vue3-element框架api里的index.js怎么用
07-14
在Vue 3和Element框架中，index.js文件是Element框架的入口文件，...通过以上步骤，你可以在Vue 3中使用Element框架api中的index.js文件。请注意，确保正确引入Element的样式文件，并按照Element框架的文档使用组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可可鸭~

想吃糖~我会甜

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值