获取地址栏中的数字部分

获取地址栏中的数字部分

用的办法比较蠢
如果地址栏中有多处数字,直接用的substr方法把前面多余的部分切掉,再提取数字部分,如果只有一个地方有数字就没必要截取了

		var url= window.location.href;
        var strurl = url.substr(45)        //截掉前面45个字符
        console.log(strurl);
        var count = parseInt(strurl.replace(/[^0-9]/ig,""));  // 获取的是数字部分,再转换为int类型

以这个url为例:https://www.88ys.com/vod-play-id-39817-src-1-num-341.html
我只要后面的341,我截取掉前面45个字符之后,就变成了 num-342.html ,然后在提取数字部分

 		var url = 'https://www.88ys.com/vod-play-id-39817-src-1-num-341.html'
        var strurl = url.substr(45)     	//截取结果 num-342.html
        var count = parseInt(strurl.replace(/[^0-9]/ig,""));  // 获取的是数字部分
        console.log(count);    		// 341
<think>好的,我现在需要帮助用户解决在Nuxt.js中获取URL查询参数的问题。首先,我得回忆一下Nuxt.js的基本结构和路由机制。根据用户提供的引用内容,特别是引用[2]和[3],Nuxt.js的路由是基于文件系统的,动态路由通过创建类似_postId.vue的文件来处理。 用户的问题是关于获取URL的查询参数,也就是query参数。在Vue.js中,通常是通过this.$route.query来获取,但Nuxt.js作为基于Vue的框架,可能有类似的方法,不过需要考虑SSR的情况。 根据引用[2],动态路由参数可以通过$route.params获取,但用户需要的是查询参数,也就是类似?key=value的部分。这时候可能需要检查Nuxt.js的上下文对象context,因为在asyncData和fetch方法中,可以通过context.query来访问查询参数。同时,在页面组件中,也可以通过this.$route.query来获取,这和Vue.js的方式一致。 需要确认的是,在Nuxt.js的生命周期钩子中,比如asyncData和fetch,是否推荐使用context.query,而在客户端是否使用this.$route.query。同时,要注意SSR和客户端环境下的差异,确保参数在两种环境下都能正确获取。 另外,用户可能是在不同的场景下获取参数,比如在页面组件初始化时,或者在方法中动态获取。需要分别说明不同的方法,并给出示例代码,比如在asyncData中使用context.query,在mounted中使用this.$route.query,或者通过watch监听路由变化。 还要考虑Nuxt.js的版本差异,但用户提供的引用中没有提到版本,所以默认使用通用的方法。最后,需要总结几种常见的方法,并提醒用户注意参数的编码问题和动态路由参数与查询参数的区别。 可能还需要生成相关问题,比如如何获取动态路由参数、如何处理参数变化等,以帮助用户进一步学习。</think>在Nuxt.js中获取URL地址栏的查询参数(即query参数)可以通过以下三种方法实现,均兼容服务端渲染(SSR)和客户端场景: 1. **通过上下文对象`context`获取** 在页面组件的`asyncData`或`fetch`方法中,直接访问上下文提供的`query`属性: ```javascript async asyncData({ query }) { return { category: query.category_id, // 获取?category_id=xxx参数 keyword: query.q || '' // 获取?q=xxx参数(带默认值) } } ``` 2. **通过`$route`对象获取** 在Vue实例方法或模板中,使用Vue Router的标准API: ```javascript mounted() { console.log(this.$route.query.page) // 获取?page=xxx参数 } ``` 3. **使用`watchQuery`属性监听参数变化** 在页面组件中添加自动监听机制: ```javascript export default { watchQuery: ['page'], // 当?page变化时自动刷新组件 methods: { loadData() { const currentPage = this.$route.query.page || 1 // 加载对应页码数据 } } } ``` **注意事项:** - 动态路由参数(如`/user/:id`)需通过`$route.params`获取,与查询参数属于不同对象[^2] - 参数值默认是字符串类型,数字类型需要手动转换 - 在服务端渲染时,`asyncData`中的`context.query`能直接读取初始参数 - 建议对敏感参数进行验证和编码处理 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值