Vue3路由机制router

于 2024-05-22 10:55:07 发布
阅读量343 收藏 9
点赞数 4
分类专栏： JavaWeb学习路线 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44201223/article/details/139112428
版权

路由机制router

1 路由简介

1.1 什么是路由？

  • 定义：路由就是根据不同的 URL 地址展示不同的内容或页面。
  • 通俗理解：路由就像是一个地图，我们要去不同的地方，需要通过不同的路线进行导航。

1.2 路由的作用

  • 单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；
  • 路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；
  • 路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。

2 路由入门案例

1 案例需求分析

在这里插入图片描述

​

2 创建项目和导入路由依赖

npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-router@4 --save //安装全局的vue-router 4版本

3 准备页面和组件

  • components/Home.vue
<script setup>
</script>

<template>
    <div>
        <h1>Home页面</h1>
    </div>
</template>

<style scoped>
</style>
  • components/List.vue
<script setup>
</script>

<template>
    <div>
        <h1>List页面</h1>
    </div>
</template>

<style scoped>
</style>
  • components/Add.vue
<script setup>
</script>

<template>
    <div>
        <h1>Add页面</h1>
    </div>
</template>

<style scoped>
</style>
  • components/Update.vue
<script setup>
</script>

<template>
    <div>
        <h1>Update页面</h1>
    </div>
</template>

<style scoped>
</style>
  • App.vue
<script setup>
</script>

<template>
    <div>
      <h1>App页面</h1>
      <hr/>
        <!-- 路由的连接 -->
        <router-link to="/">home页</router-link> <br>
        <router-link to="/list">list页</router-link> <br>
        <router-link to="/add">add页</router-link> <br>
        <router-link to="/update">update页</router-link> <br>
      <hr/>
      <!-- 路由连接对应视图的展示位置 -->
      <hr>
      默认展示位置:<router-view></router-view>
      <hr>
      Home视图展示:<router-view name="homeView"></router-view>
      <hr>
      List视图展示:<router-view name="listView"></router-view>
      <hr>
      Add视图展示:<router-view name="addView"></router-view>
      <hr>
      Update视图展示:<router-view name="updateView"></router-view>
    </div>
</template>

<style scoped>
</style>

4 准备路由配置

  • src/routers/router.js
// 导入路由创建的相关方法
import {createRouter,createWebHashHistory} from 'vue-router'

// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'
import Add from '../components/Add.vue'
import Update from '../components/Update.vue'

// 创建路由对象,声明路由规则
const router = createRouter({
    //createWebHashHistory() 是 Vue.js 基于 hash 模式创建路由的工厂函数。在使用这种模式下，路由信息保存在 URL 的 hash 中，
    //使用 createWebHashHistory() 方法，可以创建一个路由历史记录对象，用于管理应用程序的路由。在 Vue.js 应用中，
    //通常使用该方法来创建路由的历史记录对象。
    //就是路由中缓存历史记录的对象，vue-router提供
    history: createWebHashHistory(),
    routes:[
        {
            path:'/',
            /* 
                component指定组件在默认的路由视图位置展示
                components:Home
                components指定组件在name为某个值的路由视图位置展示
                components:{
                    default:Home,// 默认路由视图位置
                    homeView:Home// name为homeView的路由视图位置
                }   
            */
            components:{
                default:Home,
                homeView:Home
            }      
        },
        {
            path:'/list',
            components:{
                listView : List
            } 
        },
        {
            path:'/add',
            components:{
                addView:Add
            } 
        },
        {
            path:'/update',
            components:{
                updateView:Update
            }  
        },
    ]

})

// 对外暴露路由对象
export default router;

5 main.js引入router配置

  • 修改文件：main.js (入口文件)
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//导入router模块
import router from './routers/router.js'
let app = createApp(App)
//绑定路由对象
app.use(router)
//挂在试图
app.mount("#app")

6 启动测试

npm run dev

3 路由重定向

重定向的作用：将一个路由重定向到另一个路由上

  • 修改案例：访问/list和/showAll都定向到List.vue
  • router.js
// 导入路由创建的相关方法
import {createRouter,createWebHashHistory} from 'vue-router'

// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'
import Add from '../components/Add.vue'
import Update from '../components/Update.vue'

// 创建路由对象,声明路由规则
const router = createRouter({
    history: createWebHashHistory(),
    routes:[
        {
            path:'/',
            components:{
                default:Home,
                homeView:Home
            }      
        },
        {
            path:'/list',
            components:{
                listView : List
            } 
        },
        {
            path:'/showAll',
            // 重定向
            redirect :'/list'
        },
        {
            path:'/add',
            components:{
                addView:Add
            } 
        },
        {
            path:'/update',
            components:{
                updateView:Update
            }  
        },
    ]

})

// 对外暴露路由对象
export default router;
  • App.vue
<script setup>
</script>

<template>
    <div>
      <h1>App页面</h1>
      <hr/>
        <!-- 路由的连接 -->
        <router-link to="/">home页</router-link> <br>
        <router-link to="/list">list页</router-link> <br>
        <router-link to="/showAll">showAll页</router-link> <br>
        <router-link to="/add">add页</router-link> <br>
        <router-link to="/update">update页</router-link> <br>
      <hr/>
      <!-- 路由连接对应视图的展示位置 -->
      <hr>
      默认展示位置:<router-view></router-view>
      <hr>
      Home视图展示:<router-view name="homeView"></router-view>
      <hr>
      List视图展示:<router-view name="listView"></router-view>
      <hr>
      Add视图展示:<router-view name="addView"></router-view>
      <hr>
      Update视图展示:<router-view name="updateView"></router-view>
    </div>
</template>

<style scoped>
</style>

4 编程式路由(useRouter)

普通路由

  • <router-link to="/list">list页</router-link> 这种路由,to中的内容目前是固定的,点击后只能切换/list对象组件(声明式路由)

编程式路由

  • 通过useRouter,动态决定向那个组件切换的路由
  • 在 Vue 3 和 Vue Router 4 中，你可以使用 useRouter 来实现动态路由(编程式路由)
  • 这里的 useRouter 方法返回的是一个 router 对象，你可以用它来做如导航到新页面、返回上一页面等操作。

案例需求: 通过普通按钮配合事件绑定实现路由页面跳转,不直接使用router-link标签

  • App.vue
<script setup type="module">

  import {useRouter} from 'vue-router'
  import {ref} from 'vue'
  //创建动态路由对象
  let router = useRouter()

  let  routePath =ref('')
  let  showList= ()=>{
      // 编程式路由
      // 直接push一个路径
      //router.push('/list')
      // push一个带有path属性的对象
      router.push({path:'/list'})
  }
</script>

<template>
    <div>
      <h1>App页面</h1>
      <hr/>
        <!-- 路由的连接 -->
        <router-link to="/">home页</router-link> <br>
        <router-link to="/list">list页</router-link> <br>
        <router-link to="/showAll">showAll页</router-link> <br>
        <router-link to="/add">add页</router-link> <br>
        <router-link to="/update">update页</router-link> <br>
        <!-- 动态输入路径,点击按钮,触发单击事件的函数,在函数中通过编程是路由切换页面 -->
        <button @click="showList()">showList</button> <br>
      <hr/>
      <!-- 路由连接对应视图的展示位置 -->
      <hr>
      默认展示位置:<router-view></router-view>
      <hr>
      Home视图展示:<router-view name="homeView"></router-view>
      <hr>
      List视图展示:<router-view name="listView"></router-view>
      <hr>
      Add视图展示:<router-view name="addView"></router-view>
      <hr>
      Update视图展示:<router-view name="updateView"></router-view>
    </div>
</template>

<style scoped>
</style>

5 路由传参(useRoute)

路径参数

  • 在路径中使用一个动态字段来实现，我们称之为 路径参数
    • 例如： 查看数据详情 /showDetail/1 ,1就是要查看详情的id,可以动态添值！

键值对参数

  • 类似与get请求通过url传参,数据是键值对形式的

    • 例如: 查看数据详情/showDetail?hid=1,hid=1就是要传递的键值对参数

    • 在 Vue 3 和 Vue Router 4 中，你可以使用 useRoute 这个函数从 Vue 的组合式 API 中获取路由对象。

    • useRoute 方法返回的是当前的 route 对象，你可以用它来获取关于当前路由的信息，如当前的路径、查询参数等。

案例需求 : 切换到ShowDetail.vue组件时,向该组件通过路由传递参数

  • 修改App.vue文件
<script setup type="module">

  import {useRouter} from 'vue-router'

  //创建动态路由对象
  let router = useRouter()
  //动态路由路径传参方法
  let showDetail= (id,language)=>{
      // 尝试使用拼接字符串方式传递路径参数
      //router.push(`showDetail/${id}/${languange}`)
      /*路径参数,需要使用params  */
      router.push({name:"showDetail",params:{id:id,language:language}})
  }
  let showDetail2= (id,language)=>{
      /*uri键值对参数,需要使用query */
      router.push({path:"/showDetail2",query:{id:id,language:language}})
  }
</script>

<template>
    <div>
      <h1>App页面</h1>
      <hr/>
      <!-- 路径参数   -->
      <router-link to="/showDetail/1/JAVA">showDetail路径传参显示JAVA</router-link> 
      <button @click="showDetail(1,'JAVA')">showDetail动态路由路径传参显示JAVA</button>
      <hr/>
      <!-- 键值对参数 -->
      <router-link v-bind:to="{path:'/showDetail2',query:{id:1,language:'Java'}}">showDetail2键值对传参显示JAVA</router-link> 
      <button @click="showDetail2(1,'JAVA')">showDetail2动态路由键值对传参显示JAVA</button>
      <hr>
      showDetail视图展示:<router-view name="showDetailView"></router-view>
      <hr>
      showDetail2视图展示:<router-view name="showDetailView2"></router-view>
    </div>
</template>

<style scoped>
</style>
  • 修改router.js增加路径参数占位符
// 导入路由创建的相关方法
import {createRouter,createWebHashHistory} from 'vue-router'

// 导入vue组件

import ShowDetail from '../components/ShowDetail.vue'
import ShowDetail2 from '../components/ShowDetail2.vue'

// 创建路由对象,声明路由规则
const router = createRouter({
    history: createWebHashHistory(),
    routes:[
        
        {
            /* 此处:id  :language作为路径的占位符 */
            path:'/showDetail/:id/:language',
            /* 动态路由传参时,根据该名字找到该路由 */
            name:'showDetail',
            components:{
                showDetailView:ShowDetail
            }  
        },
        {
            path:'/showDetail2',
            components:{
                showDetailView2:ShowDetail2
            }  
        },
    ]

})

// 对外暴露路由对象
export default router;
  • ShowDetail.vue 通过useRoute获取路径参数
<script setup type="module">
    import{useRoute} from 'vue-router'
    import { onUpdated,ref } from 'vue';
    // 获取当前的route对象
    let route =useRoute()
    let languageId = ref(0)
    let languageName = ref('')
    //  借助更新时生命周期,将数据更新进入响应式对象
    onUpdated (()=>{
        // 获取对象中的参数
        languageId.value=route.params.id
        languageName.value=route.params.language
        console.log(languageId.value)
        console.log(languageName.value)
    })
    
</script>

<template>
    <div>
        <h1>ShowDetail页面</h1>
        <h3>编号{{route.params.id}}:{{route.params.language}}是世界上最好的语言</h3>
        <h3>编号{{languageId}}:{{languageName}}是世界上最好的语言</h3>
    </div>
</template>

<style scoped>
</style>
  • ShowDetail2.vue通过useRoute获取键值对参数
<script setup type="module">
    import{useRoute} from 'vue-router'
    import { onUpdated,ref } from 'vue';
    // 获取当前的route对象
    let route =useRoute()
    let languageId = ref(0)
    let languageName = ref('')
    //  借助更新时生命周期,将数据更新进入响应式对象
    onUpdated (()=>{
        // 获取对象中的参数(通过query获取参数,此时参数是key-value形式的)
        console.log(route.query)
        console.log(languageId.value)
        console.log(languageName.value)
        languageId.value=route.query.id
        languageName.value=route.query.language
       
    })
    
</script>

<template>
    <div>
        <h1>ShowDetail2页面</h1>
        <h3>编号{{route.query.id}}:{{route.query.language}}是世界上最好的语言</h3>
        <h3>编号{{languageId}}:{{languageName}}是世界上最好的语言</h3>
    </div>
</template>

<style scoped>
</style>

6 路由守卫

在 Vue 3 中，路由守卫是用于在路由切换期间进行一些特定任务的回调函数。路由守卫可以用于许多任务，例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。Vue 3 为路由守卫提供了全面的支持，并提供了以下几种类型的路由守卫：

  1. 全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等。
  2. 全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等。
  3. 守卫代码的位置: 在router.js中
//全局前置路由守卫
router.beforeEach( (to,from,next) => {
    //to 是目标地包装对象  .path属性可以获取地址
    //from 是来源地包装对象 .path属性可以获取地址
    //next是方法，不调用默认拦截！ next() 放行,直接到达目标组件
    //next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫
    console.log(to.path,from.path,next)

    //需要判断，注意避免无限重定向
    if(to.path == '/index'){
        next()
    }else{
        next('/index')
    }
    
} )

//全局后置路由守卫
router.afterEach((to, from) => {
    console.log(`Navigate from ${from.path} to ${to.path}`);
});

登录案例，登录以后才可以进入home,否则必须进入login

  • 定义Login.vue
<script setup>
    import {ref} from 'vue'
    import {useRouter} from 'vue-router'
    let username =ref('')
    let password =ref('')
    let router = useRouter();
    let login = () =>{
        console.log(username.value,password.value)
        if(username.value == 'root' & password.value == '123456'){
            router.push({path:'/home',query:{'username':username.value}})
            //登录成功利用前端存储机制，存储账号！
            localStorage.setItem('username',username.value)
            //sessionStorage.setItem('username',username)
        }else{
            alert('登录失败，账号或者密码错误！');
        }
    }

</script>

<template>
    
    <div>
        账号： <input type="text" v-model="username" placeholder="请输入账号！"><br>
        密码： <input type="password" v-model="password" placeholder="请输入密码！"><br>
        <button @click="login()">登录</button>
    </div>

</template>

<style scoped>
</style>
  • 定义Home.vue
<script setup>
 import {ref} from 'vue'
 import {useRoute,useRouter} from 'vue-router'

 let route =useRoute()
 let router = useRouter()
 //  并不是每次进入home页时,都有用户名参数传入
 //let username = route.query.username
 let username =window.localStorage.getItem('username'); 

 let logout= ()=>{
    // 清除localStorge中的username
    //window.sessionStorage.removeItem('username')
    window.localStorage.removeItem('username')
    // 动态路由到登录页
    router.push("/login")

 }

</script>

<template>
    <div>
        <h1>Home页面</h1>
        <h3>欢迎{{username}}登录</h3>
        <button @click="logout">退出登录</button>
    </div>
</template>

<style scoped>

</style>
  • App.vue
<script setup type="module">

  
</script>

<template>
    <div>
      
      <router-view></router-view>
      
    </div>
</template>

<style scoped>
</style>
  • 定义routers.js
// 导入路由创建的相关方法
import {createRouter,createWebHashHistory} from 'vue-router'

// 导入vue组件

import Home from '../components/Home.vue'
import Login from '../components/login.vue'
// 创建路由对象,声明路由规则
const router = createRouter({
    history: createWebHashHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/',
            redirect:"/home"
        },
        {
            path:'/login',
            component:Login
        },
    ]

})

// 设置路由的全局前置守卫
router.beforeEach((to,from,next)=>{
    /* 
    to 要去那
    from 从哪里来
    next 放行路由时需要调用的方法,不调用则不放行
    */
    console.log(`从哪里来:${from.path},到哪里去:${to.path}`)

    if(to.path == '/login'){
        //放行路由  注意放行不要形成循环  
        next()
    }else{
        //let username =window.sessionStorage.getItem('username'); 
        let username =window.localStorage.getItem('username'); 
        if(null != username){
            next()
        }else{
            next('/login')
        }

    }
})
// 设置路由的全局后置守卫
router.afterEach((to,from)=>{
    console.log(`从哪里来:${from.path},到哪里去:${to.path}`)
})

// 对外暴露路由对象
export default router;
  • 启动测试
npm run dev
努力奔跑的鱼
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 路由的使用
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
vue3+webpack+vue-router路由
05-21
vue3+webpack+vue-router路由，文件的代码包含了vue3+webpack+vue-router路由，代码清晰，下载下来只需要npm install下载一下依赖项之后就可以直接运行代码了。
Vue的三种路由模式
热门推荐
yiwai6998的博客
11-05 1万+
路由模式解析 这里要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。如果有进行过服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求也没有重新刷新页面，使用起来就好像页面是有状态的，这是什么原因呢。这其实是借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页
一文彻底学会Vue3路由:全面讲解路由流程、路由模式、传参等——全栈开发之路--前端篇（7）路由详解
最新发布
m0_74475812的博客
05-08 2904
本文将带你从头到尾将Vue3中的路由学透，学完之后所有的跳转需求都可以实现。
vue3中使用路由
m0_74331185的博客
04-14 1393
配置一级路由，使用routerView 做路由出口。需要在一级路由界面下 配置二级路由出口。vue3 使用的是setup简写组件。使用vuerouter的组合式api。vue3 组件为vue2组件写法。项目守卫检测用户是否登录。路由配置非路由重定向。
vue3路由模式(vue-router)
mz929的博客
06-30 311
vue-router基础玩法
vue3 路由模式
ZDM_9999的博客
11-18 364
vue3路由模式
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
vue3+ router，专项用于vue3下的动态路由实验
02-28
网上很多例题都是vue2下的动态路由，本例题使用的是vue3系列的，难度不大，用于动态路由的入门学习。也就是动态路由做了多次试验但一次都没成功的学习者。关于本例题，跑不起来的，可以留言给我，我看到后第1时间会...
vue router路由嵌套不显示问题的解决方法
08-30
主要为大家详细介绍了vue router路由嵌套不显示的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下vue-router 路由嵌套不显示问题
Vue3路由机制router(2)
南城余coding的博客
12-20 830
Vue3路由机制router(2)
Vue路由高级用法
bestkasscn的博客
12-22 714
vue-router的高级用法 路由重定向 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向 const router = createRouter({ history:createWebHashHistory(), routes:[ {path:'/',redirect:'/home'} {path:'/home',component:MyHo
Vue3 路由
翱翔-蓝天
12-27 890
首先，在定义路由时，为每个路由指定一个nameroutes});Vue Router 在 Vue 3 中是实现单页应用的关键。它提供了灵活的路由配置选项、动态路由、嵌套路由以及路由导航守卫等功能，使得开发复杂的页面导航和数据展示变得更加简单和高效。通过合理使用 Vue Router，可以大幅提升 Vue 应用的用户体验和维护性。
Vue3中的路由功能：安装和配置Vue Router、路由的基本用法、动态路由、嵌套路由
网络技术联盟站
07-18 4880
在本文中，我们详细介绍了Vue3中的路由功能。我们学习了如何安装和配置Vue Router，以及路由的基本用法、动态路由、嵌套路由和路由守卫等内容。通过合理地使用Vue Router，我们可以构建复杂的页面结构，实现灵活的路由导航，并在路由切换时执行额外的逻辑。
vue3中路由的使用
weixin_51540282的博客
02-03 218
Vue Router
Vue3 ---＞vue-router 路由
ClearloveYt的博客
07-22 339
vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目 中组件的切换。vue-router 4.x 的基本使用步骤
Vue3路由的使用
月光晒了很凉快的博客
11-24 5271
这是一个更高阶的 API，主要面向库作者，但也可以为开发者提供便利，大多数情况下用在一个类似 NavLink 这样的组件里。// 在setup中使用hook函数来得到路由对象，完成编程式导航。// 在setup中使用hook函数来得到路由对象，完成编程式导航。/* 在进场和退场的过程中，进行透明度的变化 */// 通过hook函数获取页面路由中的数据。// 通过hook函数获取页面路由中的数据。// 获取页面路由中的参数数据。// 获取页面路由中的参数数据。// 获取动态路由参数。// 获取动态路由参数。
vue3路由（基本用法、路由守卫、动态路由）
weixin_50961467的博客
04-16 1572
这里做法是使用isReady方法，它返回一个 Promise，它会在路由器完成初始导航之后被解析，也就是说这时所有和初始路由有关联的异步入口钩子和异步组件都已经被解析。用于在组件中获取当前路由的信息，返回一个包含路由信息的对象。用于获取路由实例，可以通过它来进行一些动态的路由操作，比如跳转到新的路由。route中有一个配置项是meta，专门提供给我们，在meta项中配置自己的属性与值，可用于在守卫中的权限判断。2、在全局路由守卫中设置跳转规则（未登录则跳转到登录页，已登录跳转到首页或放行）
vue3 vue-router 路由跳转
09-02
在 Vue 3 中，你可以使用 Vue Router 进行路由跳转。下面是一些基本的步骤： 1. 首先，确保你已经安装了 Vue Router。你可以通过运行以下命令来安装它： ``` npm install vue-router@next ``` 2. 在你的主文件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值