vue.js路由（vue-router）详解+案例

最新推荐文章于 2024-05-10 23:06:01 发布
最新推荐文章于 2024-05-10 23:06:01 发布
阅读量1.5k 收藏 5
点赞数 1
分类专栏： vue 前端 文章标签： vue 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43889532/article/details/106818028
版权

简介： 对于大多数单页面应用，都推荐使用官方支持的vue-router，其实简单的说路由就是跳转，和HTML<a>标签实现的效果是一样的，都是添加过路径后便可以跳转到相应位置，可能有人会说那还学vue-router干嘛直接用a标签实现不就可以了，这里就要提到vue的优点了，vue-router让构建单页面应用变得易如反掌，而如果使用a标签你需要写好多代码构造页面。(●ˇ∀ˇ●)

安装：
1、通过script标签直接引用

https://unpkg.com/vue-router@2.0.0/dist/vue-router.js

2、通过npm安装

npm install vue-router

使用方式：
<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 的 内容，to 属性后面加的是目标地址，<router-view>是路由的出口，路由显示的内容都在这里显示

HTML
<div id="app">
  <p>
    <router-link to="路径">内容</router-link>
    <router-link to="路径">内容</router-link>
  </p>
  <!-- 路由出口 -->
  <router-view></router-view>
</div>

const属性是定义路由和路由组件用的，和JavaScript的var属性类似，template属性内接的是路由输出的内容。
每个路由映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象（我们下面接触的都是组件对象）。

JavaScript
// 1. 定义（路由）组件。
const Foo = { template: '输出内容' }
const Bar = { template: '输出内容' }
 
// 2. 定义路由
const routes = [
  { path: '路径', component: Foo },
  { path: '路径r', component: Bar }
]
 
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
const app = new Vue({
  el:"#app",
  router
})

下面案例包括vue-router的重定向和别名功能和利用加入exact属性实现默认匹配的效果：
案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
		<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
	</head>
	<body>

		<div id="app">
		  <p>
		  
			<router-link to="/" exact>首页</router-link>
			<router-link to="/foo">Go to Foo</router-link>
		    <router-link to="/bar">Go to Bar</router-link>
			<router-link to="*">不存在</router-link>
		  </p>
		  <!-- 路由出口 -->
		  <router-view></router-view>
		</div>
		
		
		<script>
		const home = { template: '<div>欢迎回家</div>' }
		const Foo = { template: '<div>foo</div>' }
		const Bar = { template: '<div>bar</div>' }
	
		const routes = [
		  <!-- 设置根路径，需要将path设置为'/' -->
		  { path: '/', component: home },
		  { path: '/foo', component: Foo },
		  { path: '/bar', component: Bar },
		  { path: '*', redirect: "/"}
		]

		const router = new VueRouter({
		  routes 
		})
		const app = new Vue({
		　　el:'#app',
		　　router
		})
		
		</script>  
	</body>
</html>

嵌套
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件。

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

上面可以了解到template标签后加的是输出的内容，所以在template标签后再加入路由，便可以实现嵌套功能，但需要注意的是：在router中构造的routes配置中，children属性里的path属性只设置为当前路径即不能加“/”。

命名路由：
命名路由的常见用途是替换router-link中的to属性，如果不使用命名路由，由router-link中的to属性需要设置全路径，不够灵活，且修改时较麻烦。使用命名路由，只需要使用包含name属性的对象即可
如果加入的是路径to前不需要加":"，若是命名则需加。

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

会把路由导航到 /user/123 路径。
命名视图：
有时，您需要同时显示多个视图而不是嵌套它们，例如，创建包含一个sidebar视图和一个main视图的布局。这是命名视图派上用场的地方。您可以在多个视图中命名一个，而不是在视图中显示一个视图。

请认真看下面案例，你将对这部分内容有更好的理解：
嵌套命名案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
		<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
		  <p>
		    <router-link to="/" exact>home</router-link>
		    <router-link :to="{ name: 'foo' }">Go to Foo</router-link>
		    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
		  </p>
		  <!-- 如果 router-view 没有设置名字，那么默认为 default -->
		  <router-view></router-view>
		  <!-- <router-view name="side"></router-view> -->
		</div>
		<script>
			const home = { template: '<div>欢迎回家</div>' }
			const Foo = { template: `
			  <div>
			    <p>
			      <router-link :to="{ name: 'foo1' }" exact>to Foo1</router-link>
			      <router-link :to="{ name: 'foo2' }" >to Foo2</router-link>
			      <router-link :to="{ name: 'foo3' }" >to Foo3</router-link>  
			    </p>
			    <router-view></router-view>
			  </div>
			  ` }
			const Bar = { template: '<div>bar</div>' }
			const Foo1 = { template: '<div>Foo1</div>' }
			const Foo2 = { template: '<div>Foo2</div>' }
			const Foo3 = { template: '<div>Foo3</div>' }
			const Bar1 = { template: '<div>bar1</div>' }
			// 可以定义一个routes,然后在router中调用
			// 也可以直接将routes写在router中
			// const routes = [
			//   { path: '/', name:'home', component: home },
			//   // 注意:如果设置了默认子路由即path：' '，则不要在父级路由上设置name属性,且父机路由router-link :to="添加默认子路由的name"
			//   { path: '/foo',name:'foo', component: Foo ,children:[
			//     {path:'foo1',name:'foo1', component:Foo1},
			//     {path:'foo2',name:'foo2', component:Foo2},
			//     {path:'foo3',name:'foo3', component:Foo3},
			//   ]},
			//   // 多个视图就需要多个组件。确保正确使用components配置
			//   { path: '/bar', name:'bar', components:{
			// 	  default:Bar,
			// 	  side:Bar1
			//   }
			//     },
			// ]
            const router = new VueRouter({
               routes:[
			  { path: '/', name:'home', component: home },
			  // 注意:如果设置了默认子路由即path：' '，则不要在父级路由上设置name属性,且父机路由router-link :to="添加默认子路由的name"
			  { path: '/foo',name:'foo', component: Foo ,children:[
			    {path:'foo1',name:'foo1', component:Foo1},
			    {path:'foo2',name:'foo2', component:Foo2},
			    {path:'foo3',name:'foo3', component:Foo3},
			  ]},
			  // 多个视图就需要多个组件。确保正确使用components配置
			  { path: '/bar', name:'bar', components:{
				  default:Bar,
				  side:Bar1
			  }
			    },
			] 
            })
            const app = new Vue({
            	el:'#app',
            	router
            })
		</script>
	</body>
</html>

且通过上面案例可以看出，routes可以单独定义后在router中调用也可以直接在router中构造。

动态路径：
　我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。如果我们使用嵌套的方法哪有要知道每个用户的id，这样实现太过于麻烦，我们便可以在 vue-router 的路由路径中使用动态路径参数来达到这个效果。
　一个路径参数使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，可以更新 User 的模板，输出当前用户的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

我们也可以在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params 中。

模式     　　　　　　　　　　　　　　匹配路径     　　　　　　$route.params
/user/:username     　　　　　　　/user/evan     　　　　{ username: 'evan' }
/user/:username/post/:post_id   /user/evan/post/123   { username: 'evan', post_id: 123 }

动态路径案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
		<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
		    
		  <p>
		    <router-link to="/" exact>home</router-link>
		    <router-link :to="{name:'user'}">User</router-link>
		    <router-link :to="{name:'bar'}">Go to Bar</router-link>
		  </p>
		  <router-view></router-view>
		</div>
		<!-- 一个路由中可以设置多段『路径参数』，对应的值都会设置到 $route.params 中 -->
		<!-- 模式     　　　　　　　　　　　　　　匹配路径     　　　　　　$route.params
		/user/:username     　　　　　　　/user/evan     　　　　{ username: 'evan' }
		/user/:username/post/:post_id   /user/evan/post/123   { username: 'evan', post_id: 123 } -->
		<script type="text/javascript">
			const home = { template: '<div>欢迎回家</div>'};
			const bar = { template: '<div>bar</div>'};
			const user = 
			  {template: `<div>
			    <p>user</p>
			    <router-link style="margin: 0 10px" :to="'/user/' +item.type + '/'+ item.id" v-for="item in userList" key="item.id">{{item.username}}</router-link>  
			    <div v-if="$route.params.id">
			      <div>id:{{userInfo.id}};username:{{userInfo.username}} ;type:{{userInfo.type}};</div>
			    </div>
			</div>`,
			  data(){
			    return{
			      userList:[{id:1,type:'vip',username:'u1'},{id:2,type:'common',username:'u2'},{id:3,type:'vip',username:'u3'}],
			      userInfo:null,
			    }
			  },
			  methods:{
			    getData(){
			      let id = this.$route.params.id;
			      if(id){
			        this.userInfo = this.userList.filter((item)=>{
			          return item.id == id;
			        })[0]
			      }else{
			        this.userInfo = {};
			      }   
			    }
			  },
			  created(){
			    this.getData();
			  },
			  watch:{
			    $route(){
			      this.getData();
			    },
			  }
			};
			const app = new Vue({
			  el:'#app',
			  router:new VueRouter({
			    routes: [
				// path:'/user/:id?'表示有没有子路径都可以匹配
			      { path: '/', name:'home', component:home },
			      { path: '/user/:type?/:id?', name:'user', component:user},
			      { path: '/bar', name:'bar', component:bar},
			    ]
				
			  }), 
			})
		</script>
	</body>
</html>

提示：path:’/user/:id?'表示有没有子路径都可以匹配， watch是用于检测 $route 对象的变化的
且有时同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高
若想更加详细的了解可以点击这里

过渡动效：
是基本的动态组件，所以可以用 组件给它添加一些过渡效果

<transition>
        <router-view></router-view>
    </transition>

简单案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
		<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
	</head>
	<style>
		  .router-link-active{background:pink;}
		  .v-enter,.v-leave-to{
		    opacity:0;
		  }
		  .v-enter-active,.v-leave-active{
		    transition:opacity .5s;
		  }
	</style>
	<body>
		<!-- 通过前进、后退按钮进行切换时，保持坐标位置 -->
		<div id="app">
			<p>
				<!-- 如果加入的是路径to前不需要加":"，若是命名则需加。
				exact为默认页 -->
				<router-link  to="/" exact>首页</router-link>
				<router-link :to="{name: 'root' }">内容1</router-link>
				<router-link :to="{name: 'root1' }">内容2</router-link>
			
			</p>
			<transition>
				<router-view></router-view> 
			</transition>
			<router-view name="side"></router-view>
		</div>
		
		<script>
			const home={template:'<div>欢迎回家</div>'}
			const Root={template:'<div>内容1</div>'}
			const new1={template:'<div>信息页1</div>'}
			const new2={template:'<div>信息页2</div>'}
		
			const routes=[
				{path:'/',name:'home',component:home},
				{path:'/root',name:'root',component:Root},
				{path:'/root1',name:'root1',components:{
					default:new1,
					side:new2
				}
				},
			]
			const router=new VueRouter({
				
				  routes 
				
			})
			const app=new Vue({
				el:"#app",
				router
			})	
		</script>
	</body>
</html>

导航钩子：
可以使用 router.beforeEach 注册一个全局的 before 钩子
构造方式：

router.beforeEach((to, from, next) => {
			  if(to.meta.login){
			    next('/login');
			  }
			  if(to.meta.login2){
			    next('/login2');
			  }
			  next();
			});

也可以使用 router.afterEach 注册一个全局的 after钩子，构造方式和构造before 钩子一样。

这里是next()函数传递不同参数的情况：

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
  • next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航钩子</title>
		<script src="vue.js"></script>
		<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
	</head>
	<div id="app">
		<p>
			<router-link  to="/" exact>首页</router-link>
			<router-link :to="{name: 'foo' }">内容1</router-link>
			<router-link :to="{name: 'bar' }">内容2</router-link>
		</p>
		<router-view></router-view>
	</div>
	<body>
		<script type="text/javascript">
			const Home = { template: '<div>home</div>' }
			const Foo = { template: '<div>Foo</div>'}
			const Bar = { template: '<div>bar</div>' }
			const Login = { template: '<div>请登录</div>' }
			const Login2 = { template: '<div>请返回</div>' }
			const routes = [
			  { path: '/', name:'home', component: Home,meta:{index:0}},
			  { path: '/foo', name:'foo', component:Foo,meta:{index:1,login:true}},
			  { path: '/bar', name:'bar', component:Bar,meta:{index:2,login2:true}},
			  { path: '/login', name:'login', component:Login,},
			  { path: '/login2', name:'login2', component:Login2,},
			]
			const router = new VueRouter({
			  routes ,
			})
			router.beforeEach((to, from, next) => {
			  if(to.meta.login){
			    next('/login');
			  }
			  if(to.meta.login2){
			    next('/login2');
			  }
			  next();
			});
			router.afterEach((to, from)=>{
			  document.title = to.name;
			})
			const app = new Vue({
			  el:'#app',
			  router,
			})
		</script>
	</body>
</html>

结果可以看到：
在这里插入图片描述
点击第一下内容人1出现请登录，再次点击将出现foo,点击第一下内容人2出现请返回，再次点击将出现bar。这种效果我们在项目中也特别常见，利用这种情况我们可以更加简单的实现不同点击次数实现不同的效果的功能。

总结：上面所介绍的功能是我感觉我们在项目中常用的一些，当然vue-router还有一些功能，这里我没有介绍，如果想对于其他功能进行下了解可以到vue-router官网，官网介绍还是比较详细的，但是不能进行实例演示，我感觉剩下没介绍的功能可以简单了解下便可以了（个人感觉），看着官网介绍写点小案例就可以了。

对于这部分不懂得或者比较理解的可以在评论区评论下，大家互相学习下。👨🏻‍💻👨🏻‍💻👨🏻‍💻👨🏻‍💻👩🏻‍💻👩🏻‍💻👩🏻‍💻(●ˇ∀ˇ●)

清风无虑skr
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js路由组件vue-router使用方法详解
12-29
使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染即可。 一、普通方式基本例子： <!DOCTYPE html> <html lang=en> <head> <...
Vue.js路由vue-router使用方法详解
10-20
3. **创建并配置路由**：接下来，创建一个VueRouter实例，然后使用`router.map()`方法映射路由。这里，每个路由都是一个键值对，键是路径，值是对应的组件。 ```javascript var router = new VueRouter(); router....
vue-VueRouter-后台管理案例
gaogzhen的博客
07-29 1407
vue-VueRouter-后台管理案例 目录 文章目录1、UI界面2、项目分析3、项目改造3.1、抽离并渲染App根组件3.2、把左侧菜单改造为路由链接3.3、创建左侧菜单对应的组件3.4、右侧主体区域添加路由占位符3.5、添加子路由规则3.6、通过路由重定向默认渲染用户组件3.7、渲染用户列表数据3.8、编程式导航跳转到用户详细页3.9、实现后退功能4、完整代码及效果图***后记*** ： 内容 1、UI界面 一般情况下，前端页面由UI做好页面（html+css)给我们，我们根据UI页面修改为
Vue Router使用示例
lovoo的博客
03-31 862
Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）映射表：[内网ip1:电脑标识1，内网ip2:电脑标识2]路由器 -> 公网IP -> 映射表 -> 内网IP。创建文件夹 router，创建index.html。特点：单页Web应用，预先加载页面内容。路由包括路由和转发。
2024年vue-router原理解析，2024年最新Web前端面试项目经验
最新发布
2401_84618926的博客
05-10 586
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
Vue学习第27天——路由vue-router的详解及案例练习
背心的博客
09-21 2433
路由vue-router的详解及案例练习
vue-router路由使用实例详解
小小默：进无止境
11-16 935
【1】路由入门 官网文档：https://router.vuejs.org/zh/installation.html github: https://github.com/vuejs/vue-router 下载安装 npm install vue-router --save 引入模块 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ...
Vue路由实例
望天吼
09-01 1581
Vue路由实例
Vue-router、以及小实例 2022-3-17
m0_56661579的博客
03-17 475
一、Vue-router路由 1.1安装vue-router cnpm install vue-router --save-dev 1.2 然后导入vue-router 1.3 运行：npm run dev 由于我的Vue-router版本高，所以得进行降级 先把旧版本卸载了 cnpm uninstall vue-router 然后在安装cnpm install vue-router@3.2.0 运行npm run dev 运行结果：网址：http://localhost:8080 二、做一个
VueJs路由跳转——vue-router的使用详解
10-20
在JavaScript中，需要创建一个VueRouter实例并传入配置参数： ```javascript var router = new VueRouter({ routes: [ { path: '/view-a', component: ViewA }, { path: '/view-b', component: ViewB } ] }); ...
Vue开发实例（九）动态路由实现左侧菜单导航
Daniel
03-03 2542
动态路由，防止超权限展示不属于自己的内容
vue-router路由与页面间导航实例解析
11-30
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 vue-router 我们知道路由定义了一系列访问的地址规则，路由引擎根据这些规则匹配找到对应的处理页面，然后将请求转发给页进行处理。可以说所有的后端开发都是这样做的，而前端路由是不存在”请求”一说的。 前端路由是找到地址匹配的一个组件或者对象将其渲染出来。改变浏览器地址不向服务器
vue-router路由简单案例介绍
12-02
官方文档： 旧版：https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版：http://router.vuejs.org/（2.0版本） 此文是旧版 文件结构图： 基本用法： <router>是一个顶级的路由外链，用于渲染匹配的组件。 例如：我的应用入口是app.vue 那么在app.vue中添加如下代码， 此处涉及ES6。 app.vue <template> <div class='page index-content'> <router-view class="view" keep-alive
vue-router
weixin_41989325的博客
04-28 260
参考学习：https://www.cnblogs.com/SamWeb/p/6610733.html
vue路由1.0_Vue.js 路由详解（一）
weixin_39759600的博客
12-20 148
1. Vue.js 路由的作用用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。简单的理解路由将浏览器地址栏的url信息进行有规律的解析并渲染对应的视图...
【Vue路由（router）进一步详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
03-23 3万+
文章主要从Vue-router（路由）常用的几个属性以及参数配置出发，更深一层了解路由在实际开发中的使用，结合实例向大家说明路由常用的参数配置，以及使用路由的一些小技巧。
vue-router详解及实例
李刚的学习专栏
01-13 1万+
写在前面 用户进行了交互操作，现在要对页面内容进行变更，可以通过javascript进行动态替换DOM，但是其不便于分享、收藏，对于搜索引擎和用户来说都是不友好的！ 什么是前端路由？ ​ 根据不同的 url 地址展示不同的内容或页面，无需依赖服务器根据不同URL进行页面展示操作 优点 用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点 使用浏览器的前进，后退键的
VUE.js的路由（vue-router）及基本使用
wanglingli95的博客
02-16 5559
任务1：什么是前端路由 1.1 vue-router 的理解 vue-router是vue .js官方提供的一套专用的路由插件库，专门用来实现 SPA 应用。 1.2 对 SPA 应用的理解 单页 Web 应用（single page web application，SPA）。 整个应用只有一个完整的页面。 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。 数据需要通过 ajax 请求获取。 1.3 什么是路由 一个路由就是一组映射关系（key - value），key 为路径, v
Vue学习：Vue中的路由详解（完整版）
qq_49916504的博客
06-19 1万+
vue中的路由知识详解完整版
Vue.js路由详解：从入门到实战示例
Vue.js路由vue-router是Vue框架中的核心组件，它为构建单页面应用程序提供了强大的导航管理功能。作为官方推荐的路由解决方案，它与Vue.js紧密结合，使得页面间的路由切换和组件的动态加载变得简单易行。 在Vue单页...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值