十四、使用 Vue Router 开发单页应用（4）

最新推荐文章于 2023-07-16 23:44:04 发布
最新推荐文章于 2023-07-16 23:44:04 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： # Vue.js 3.0 从入门到实战 文章标签： 导航守卫 全局守卫 路由独享的守卫 组件内守卫 导航解析流程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GXL_1012/article/details/128266184
版权

本周概要

  • 导航守卫
    • 全局守卫
    • 路由独享的守卫
    • 组件内守卫
    • 导航解析流程

14.10 导航守卫

在 14.4 嵌套路由 小节中已经使用过一个组件内的导航守卫：beforeRouteUpdate 。Vue Router 提供的导航守卫主要用于在导航过程中重定向或取消路由，或添加权限验证、数据获取等业务逻辑。
导航守卫分为3类：全局守卫、路由独享的守卫、组件内守卫，可以用于路由导航过程中的不同阶段。每一个导航守卫都有两个参数：to 和 from ，其含义已在 14.4 嵌套路由 小节介绍过，此处不再赘述。

14.10.1 全局守卫

全局守卫分为全局前置守卫、全局解析守卫和全局后置钩子。

  1. 全局前置守卫

当一个导航触发时，全局前置守卫按照创建的顺序调用。守卫可以是异步解析执行，此时导航在所有守卫解析完之前一直处于挂起状态。全局前置守卫使用 router.beforeEach() 注册。代码如下所示：

const router = createRouter({...})
router.beforeEach((to,from) => {
  // ...
  // 显式返回 false 以取消导航
  return false;
})

除了返回 false 取消导航外，还可以返回一个路由位置对象，这将导致路由重定向到另一个位置，如同正在调用 router.push() 方法一样，可以传递诸如 replace:true 或 name:‘home’ 之类的选项。返回路由位置对象时，将删除当前导航，并使用相同的 from 创建一个新的导航。

如果遇到意外情况，也可能抛出一个 Error 对象，这也将取消导航并调用通过 router.onError() 注册的任何回调。
如果没有任何返回值、undefined 或 true ，则验证导航，并调用下一个导航守卫。
上面所有的工作方式都与异步函数和 Promise 相同。例如：

router.beforeEach(async (to,from) => {
  // canUserAccess() 返回 true 或 false
  return await canUserAccess(to)
})
  1. 全局解析守卫

全局解析守卫使用 router.beforeResolve() 注册。它和 router.beforeEach() 类似，区别在于，在导航被确认之前，在所有组件内守卫和异步路由组件被解析之后，解析守卫被调用。
下面的例子用于确保用户已经定义了自定义 meta 属性 requiresCamera 的路由提供了对相机的访问。

router.beforeResolve(async to => {
  if(to.meta.requiresCamera){
    try {
      await askForCameraPermission()
    } catch (error) {
      // ... 处理错误，然后取消导航
      return false
    }else{
    	// ...意外错误，取消导航并将错误传递给全局处理程序
    	throw error
    }
  }
})
  1. 全局后置钩子

全局后置钩子使用 router.afterEach() 注册，它在导航被确认之后调用。

router.afterEach((to,from) => {
  sendToAnalytics(to.fullPath)
})

与守卫不同的是，全局后置钩子不接受可选的 next() 函数，也不会改变导航。
全局后置钩子对于分析、更改页面标题、可访问性功能（如发布页面）和许多其他功能都非常有用。
全局后置钩子还可以接受一个表示导航失败的 failure 参数，作为第 3 个参数。代码如下：

router.afterEach((to,from,failure) => {
  if(!failure){
    sendToAnalytics(to.fullPath)
  }
})
  1. 实际应用

下面利用全局守卫来解决两个实际开发中的问题。
（1）登录验证
第一个问题是登录验证。对于受保护的资源，需要用户登录后才能访问，如果用户没有登录，那么就将用户导航到登录页面。为此，可以利用全局前置守卫来完成用户登录与否的判断。
继续前面的例子，在components 目录下新建 Login.vue。如下：

<template>
    <div>
        <h3>{{ info }}</h3>
        <table>
            <caption>用户登录</caption>
            <tbody>
                <tr>
                    <td><label>用户名：</label></td>
                    <td><input type="text" v-model.trim="username"></td>
                </tr>
                <tr>
                    <td><label>密码：</label></td>
                    <td><input type="password" v-model.trim="password"></td>
                </tr>
                <tr>
                    <td cols="2">
                        <input type="submit" value="登录" @click.prevent="login" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            username: "",
            password: "",
            info: ""   //用于保存登录失败后的提示信息
        }
    },
    methods: {
        login() {
            //实际场景中，这里应该通过Ajax向服务端发起请求来验证
            if ("lisi" == this.username && "1234" == this.password) {
                //sessionStorage中存储的都是字符串值，因此这里实际存储的将是字符串"true"
                sessionStorage.setItem("isAuth", true);
                this.info = "";
                //如果存在查询参数
                if (this.$route.query.redirect) {
                    let redirect = this.$route.query.redirect;
                    //跳转至进入登录页前的路由
                    this.$router.replace(redirect);
                } else {
                    //否则跳转至首页
                    this.$router.replace('/');
                }
            }
            else {
                sessionStorage.setItem("isAuth", false);
                this.username = "";
                this.password = "";
                this.info = "用户名或密码错误";
            }

        }
    }
}
</script>

修改路由配置文件 index.js ，如下：

import {createRouter, createWebHistory} from 'vue-router'
//import Home from '@/components/Home'
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import Book from '@/components/Book'
import Login from '@/components/Login'

const router = createRouter({
  //history: createWebHashHistory(),
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: {
        name: 'news'
      }
    },
    {
      path: '/news',
      name: 'news',
      component: News,
    },
    {
      path: '/books',
      name: 'books',
      component: Books,
      /*
      children: [
        {path: '/book/:id', name: 'book', component: Book, props: true}
      ]*/
    },
    {
      path: '/videos',
      name: 'videos',
      component: Videos,
    },
    {
      path: '/book/:id',
      name: 'book',
      components: {bookDetail: Book},
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
    }
  ]
})

router.beforeEach(to => {
  //判断目标路由是否是/login，如果是，则直接返回true
  if(to.path == '/login'){
    return true;
  }
  else{
    //否则判断用户是否已经登录，注意这里是字符串判断
    if(sessionStorage.isAuth === "true"){
      return true;
    } 
    //如果用户访问的是受保护的资源，且没有登录，则跳转到登录页面
    //并将当前路由的完整路径作为查询参数传给Login组件，以便登录成功后返回先前的页面
    else{
      return {
        path: '/login',
        query: {redirect: to.fullPath}
      }
    }
  }
})

router.afterEach(to => {
  document.title = to.meta.title;
})

export default router

需要注意的是：代码中的 if(to.path == ‘/login’){ return true } 不能缺少，如果写成下面的代码，会造成死循环。

router.beforEach( to => {
  if(sessionStorage.isAuth === 'true'){
    return true;
  }else{
    return {
      path:'/login',
      query:{redirect:to.fullPath}
    }
  }
} )

例如初次访问 /news ，此时用户还没有登录，条件判断为 false，进入 else 语句，路由跳转到 /login ，然后又执行 router.beforeEach() 注册全局前置守卫，条件判断依然为 false，再次进入 else 语句，最后导致页面死掉。

为了方便访问登录页面，可以在 App.vue 中添加一个登录的导航链接。如下：

<router-link to:"{name:'login'}">登录</router-link>

完成上述修改后，运行项目。出现登录页面后，输入正确的用户名（lisi）和密码（1234），看看路由的跳转，如下：
在这里插入图片描述

在这里插入图片描述

之后输入错误的用户名和密码，再看看路由的跳转，如下：
在这里插入图片描述

（2）页面标题
下面解决第二个问题，就是路由跳转后的页面标题问题。因为在单页应用程序中，实际只有一个页面，因此在页面切换时，标题不会发生改变。

在定义路由时，在 routes 配置中的每个路由对象（也称为路由记录）都可以使用一个 meta 字段来为路由对象提供一个元数据信息。我们可以为每个组件在它的路由记录里添加 meta 字段，在该字段中设置页面的标题，然后在全局后置钩子中设置目标路由页面的标题。

全局后置钩子是在导航确认后，DOM 更新前调用，因此在这个钩子中设置页面标题是比较合适的。
修改路由配置文件 index.js 。如下：

import {createRouter, createWebHistory} from 'vue-router'
//import Home from '@/components/Home'
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import Book from '@/components/Book'
import Login from '@/components/Login'

const router = createRouter({
  //history: createWebHashHistory(),
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: {
        name: 'news'
      }
    },
    {
      path: '/news',
      name: 'news',
      component: News,
      meta: {
        title: '新闻'
      }

    },
    {
      path: '/books',
      name: 'books',
      component: Books,
      meta: {
        title: '图书列表'
      }
      /*
      children: [
        {path: '/book/:id', name: 'book', component: Book, props: true}
      ]*/
    },
    {
      path: '/videos',
      name: 'videos',
      component: Videos,
      meta: {
        title: '视频'
      }
    },
    {
      path: '/book/:id',
      name: 'book',
      meta: {
        title: '图书'
      },
      components: {bookDetail: Book},
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        title: '登录'
      }
    }
  ]
})

router.afterEach(to => {
  document.title = to.meta.title;
})

export default router

运行项目，此时每个页面有自己的标题。如下：
在这里插入图片描述

在这里插入图片描述

meta 字段也可以用于对有限资源的保护，在需要保护的路由对象中添加一个需要验证属性，然后在全局前置守卫中判断，如果访问的是受保护的资源，继续判断用户是否已经登录，如果没有，则跳转到登录页面。如下：

{
  path: '/videos',
  name: 'videos',
  component: Videos,
  meta: {
    title: '视频',
    requiresAuth:true
  }
}

在全局前置守卫中进行判断（index.js）。如下：

import { createRouter, createWebHistory } from 'vue-router'
//import Home from '@/components/Home'
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import Book from '@/components/Book'
import Login from '@/components/Login'

const router = createRouter({
  //history: createWebHashHistory(),
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: {
        name: 'news'
      }
    },
    {
      path: '/news',
      name: 'news',
      component: News,
      meta: {
        title: '新闻'
      }

    },
    {
      path: '/books',
      name: 'books',
      component: Books,
      meta: {
        title: '图书列表'
      }
      /*
      children: [
        {path: '/book/:id', name: 'book', component: Book, props: true}
      ]*/
    },
    {
      path: '/videos',
      name: 'videos',
      component: Videos,
      meta: {
        title: '视频',
        requiresAuth: true
      }
    },
    {
      path: '/book/:id',
      name: 'book',
      meta: {
        title: '图书'
      },
      components: { bookDetail: Book },
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        title: '登录'
      }
    }
  ]
})

router.beforeEach(to => {
  // 判断该路由是否需要登录权限
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 路由需要验证，判断用户是否已经登录
    if (sessionStorage.isAuth === "true") {
      return true;
    } else {
      return {
        path: '/login',
        query: { redirect: to.fullPath }
      }
    }
  } else {
    return true
  }
})

router.afterEach(to => {
  document.title = to.meta.title;
})

export default router

路由位置对象的 matched 属性是一个数组，包含了当前路由的所有嵌套路径片段的路由记录。

重启项目，此时访问首页没问题，如下：
在这里插入图片描述

但是访问视频则需要登录，如下：
在这里插入图片描述

登录之后，显示如下：
在这里插入图片描述

14.10.2 路由独享的守卫

路由独享的守卫是在路由的配置对象中直接定义的 beforeEnter 守卫。代码如下所示：

const routes = [
  {
    path:'/users/:id',
    component:UserDetails,
    beforeEnter:( to,from ) => {
      // reject the navigation
      return false;
    }
  }
]

beforeEnter 守卫在全局前置守卫调用后，只在进入路由时触发，他们不会再参数、查询参数或 hash 发生变化时触发。
例如，从 /user/2 到 /user/3 ，或者从 /user/2#info 到 /user/2#project ，均不会触发 beforeEnter 守卫。beforeEnter 守卫只有在从不同的路由导航过来时才会触发。
也可以给 beforeEnter 传递一个函数数组，这在为不同的路由复用守卫时很有用。代码如下：

function removeQueryParams(to){
  if (Object.key(to.query).length) {
    return {
      path:to.path,
      query:{},
      hash:to.hash
    }
  }
}
function removeHash (to){
  if(to.hash) {
    return {
      path:to.path,
      query:to.query,
      hash:''
    }
  }
}
const routes = [
  {
    path:'/users/:id',
    component:UserDetails,
    beforeEnter:[removeQueryParams,removeHash]
  },
  {
    path:'/about',
    component:UserDetails,
    beforeEnter:[removeQueryParams]
  }
]

14.10.3 组件内守卫

在 14.4 节 中使用的 beforeRouteUpdate 守卫就是组件内守卫。除此之外，还有两个组件内守卫：beforeRouteEnter 和 beforeRouteLeave。

const UserDetails = {
  template : '...',
  beforeRouteEnter(to,from){
    // 在渲染该组件的路由被确认之前调用
    // 不能通过 this 访问组件实例，因为在守卫执行前，组件实例还没有被创建
  },
  beforeRouteUpdate(to,from){
    // 在渲染该组件的路由，但是在该组件被复用时调用
    // 例如，对于一个带参数的路由 /users/:id，在 /user/1 和 /user/2 之间跳转时
    // 相同的 UserDetails 组件实例将会被复用，而这个守卫就会在这种情况下被调用
    // 可以访问组件实例的 this
  }
  beforeRouteLeave(to,from){
  	// 导航即将离开该组件的路由时调用
  	// 可以访问组件实例的 this
  }
}

beforeRouteEnter 守卫不能访问 this，因为该守卫是在导航确认钱被调用，这是新进入的组件基本还没有创建。
但是，可以通过向可选的 next() 函数参数传递一个回调来访问实例，组件实例将作为参数传递给回调。当导航确认后会执行回调，而这个时候，组件实例已经创建完成。如下：

beforeRouteEnter(to,from,next){
  next(vm => {
    // 通过 vm 访问组件实例
  })
}

需要注意的是，beforeRouteEnter 是唯一支持将回调传递给 next() 函数的导航守卫。对于 beforeRouteUpdate 和 beforeRouteLeave ，由于this 已经可用，因此不需要传递回调，自然也就没必要支持想 next() 函数传递回调了。
下面利用 beforeRouteEnter 的这个机制，修改 Book.vue ，将 created 钩子用 beforeRouteEnter 守卫替换。如下：

Book.vue

<template>
    <p> 图书ID：{{ book.id }} </p>
    <p> 标题：{{ book.title }} </p>
    <p> 描述：{{ book.desc }} </p>
</template>

<script>
import Books from '@/assets/books'
import { onBeforeRouteUpdate } from 'vue-router';
export default {
    data() {
        return {
            book: {}
        }
    },
    // created() {
    //     this.book = Books.find((item) => item.id == this.$route.params.id);
    //     this.$watch(
    //         () => this.$route.params,
    //         (toParams) => {
    //             console.log(toParams)
    //             this.book = Books.find((item) => item.id == toParams.id);
    //         }
    //     )
    // }
    methods:{
        setBook(book){
            this.book = book;
        }
    },
    beforeRouteEnter (to,from,next){
        let book = Books.find((item) => item.id == to.params.id);
        next (vm => vm.setBook(book));
    },
    beforeRouteUpdate(to){
        this.book = null;
        this.book = Books.find((item) => item.id == to.params.id)
    }
}
</script>

beforeRouteLeave 守卫通常用来防止用户在还未保存修改前突然离开，可以通过返回 false 取消导航。如下：

beforeRouteLeave (to,from){
  const answer = window.confirm('Do you really want to leave ? you have unsaved changes!');
  if(!answer){
    return false;
  }
}

14.10.4 导航解析流程

完整的导航解析流程如下：

  1. 导航被触发
  2. 在失活的组件中调用 beforeRouteLeave 守卫
  3. 调用全局的 beforeEach 守卫
  4. 在复用的组件中调用 beforeRouteUpdate 守卫
  5. 调用路由配置中的 beforeEnter 守卫
  6. 解析异步路由组件
  7. 在被激活的组件中调用 beforeRouteEnter 守卫
  8. 调用全局的 beforeResolve 守卫
  9. 导航被确认
  10. 调用全局的 afterEach 钩子
  11. 触发 DOM 更新
  12. 用创建好的实例调用 beforeRouteEnter 守卫传给 next() 函数的回调函数

可以在 14.1.1 小节中的 routes.html 页面添加所有的导航守卫，利用 console.log() 语句输出守卫信息，然后观察一下各个守卫调用的顺序，就能更好的理解守卫调用的时机。

一只小熊猫呀
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-router单页面路由
12-07
准备路由 new VueRouter（）； 关联路由 map 启动路由 start(App,’#box’)；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中 github上vue-router下载地址：...
新手vue构建单页面应用实例代码
12-10
2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一、目录结构： 二、搭建项目 先安装 vue-cli： sudo npm install -g vue-cli ...
十四、使用 Vue Router 开发单页应用（1）
走在bug的路上
12-04 1339
● 感受前端路由 ○ HTML 使用路由 ○ 模块开发使用路由
浅谈前端SPA（单页面应用）
weixin_30624825的博客
08-20 174
单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA...
Vue3路由配置createRouter、createWebHistory、useRouter,useRoute
热门推荐
看见小狮子没
09-22 1万+
Vue3和Vue2基本差不多，只不过需要将、从中引入，再进行使用。
十四、使用 Vue Router 开发单页应用（3）
走在bug的路上
12-04 1126
● 命名路由 ● 命名视图 ● 编程式导航 ● 传递 prop 到路由组件 ● HTML 5 history 模式
三十分钟学会使用vue-router搭建单页应用（SPA）
越努力，越幸运！
10-11 1715
一、什么是单页应用 单页web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说...
Vue 2.0+Vue-router构建一个简单的单页应用（附源码）
12-04
目前 最火的前端框架，vue.js 兼具 angular.js 和 react.js 的优点，并剔除它们的缺点，并且提供了很多的周边配套工具 如vue-router 、vue-resource 、vuex等等 ，通过他们我们可以很轻松的构建一个大型单页应用。...
vue2.0构建单页应用最佳实战
01-27
使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请求我们的node服务端5.使用.vue文件进行组件化的开发PS：本文nodev6.2.2npmv3.9.5vuev2.1.0vue-router v2.0.3vuexv2.0.0最终我们将会构
【vue-router源码】四、createRouter源码解析
MAXLZ的博客
06-07 5039
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该篇文章将带你分析的createRouter实现。
06-路由配置
Burgess_Lee的博客
10-13 1552
路由相关知识点总结
Vue学习:全局路由守卫beforeEach、afterEach
weixin_47295886的博客
03-10 810
点---》会出现路由组件，但是有些组件---又特定要求才能显示组件---》在路由规则里面进行要求设置创建路由对路由器+路由首位。
Vue3中路由的引入和基本使用
weixin_49042147的博客
03-09 1716
Vue3中路由的安装引入和基本使用 本文采用setup语法糖
Vue3开发教程（ 四、Vue-router基础篇）
weixin_39873136的博客
05-30 4432
介绍vuer-router中的<router-link>、<router-view>、嵌套路由、router-api操作等相关知识，并集将内容集成到demo项目中。
十四、使用 Vue Router 开发单页应用（6）
走在bug的路上
12-14 1362
● 延迟加载路由 ● 等待导航结果 ● 动态路由 ○ 添加路由 ○ 在导航守卫中添加路由 ○ 删除路由 ○ 添加嵌套路由 ○ 查看现有路由
Vue3-创建路由
我是一只小小鸟，想要飞呀飞的更高。
01-14 1980
Vue3创建路由
Vue学习：路由（实现单页面应用SPA）
weixin_47295886的博客
03-09 100
原始html中我们使用a标签实现页面的跳转 --》 Vue中借助router-link标签实现路由的切换。安装vue-router：指定版本 自己的脚手架支持上什么版本要查资料。active-class="active" 激活的样式实现高亮效果。指定组件的呈现位置router-view。替换：a --》router-link。局部刷新--改变路径 不全部刷新。对于实例上，产生了router。点击 页面回刷新：多页面内容。使用需要你创建router，
Vue Router：打造单页面应用（SPA）中流畅的导航和路由功能
Why_does_it_work的博客
07-16 1048
Vue Router是Vue.js官方提供的路由管理器。它可以帮助开发者构建单页面应用（SPA）并实现页面之间的导航功能。通过使用Vue Router，你可以定义不同URL路径与对应组件之间的映射关系，使得在浏览器地址栏发生变化时，能够动态地加载和渲染相应的组件，从而实现页面的无刷新切换。Vue Router是Vue.js官方提供的路由管理器，用于构建单页面应用（SPA）。它提供了一种简洁、灵活的方式来管理应用程序的路由，并实现页面之间的导航和切换。
【Vue 路由】
落雪映青衣的博客
07-26 1001
Vue路由
vue-router单页面应用跳转路由时触发事件
最新发布
07-27
在Vue.js中使用vue-router进行单页面应用的路由跳转时，可以通过监听路由变化来触发相应的事件。可以使用`beforeEach`或`afterEach`钩子函数来实现。 - 使用`beforeEach`钩子函数：在路由跳转之前触发事件。可以在`router/index.js`文件中的路由配置中添加如下代码： ```javascript import router from 'vue-router' router.beforeEach((to, from, next) => { // 在这里触发需要执行的事件 // ... next() // 确保要调用 next 方法，否则路由不会继续跳转 }) ``` - 使用`afterEach`钩子函数：在路由跳转之后触发事件。同样，在`router/index.js`文件中的路由配置中添加如下代码： ```javascript import router from 'vue-router' router.afterEach((to, from) => { // 在这里触发需要执行的事件 // ... }) ``` 以上两种方式可以根据具体需求选择使用。在触发事件的地方，你可以调用相关的函数、发送请求、修改状态等操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

一只小熊猫呀

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值