vue 进入页面获取到url上的参数保存本地

最新推荐文章于 2024-07-15 17:15:41 发布
最新推荐文章于 2024-07-15 17:15:41 发布
阅读量741 收藏 3
点赞数 2
分类专栏： vue 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44528919/article/details/127530927
版权

vue 进入页面获取到url上的参数保存本地


分享一些vue常用小知识

如果url上面带有参数,例如www.XXX.com?name=zhangsan

可以直接通过路由的方式直接获取

以上面的地址为例，this.$route.query.name,获取到参数name的值

保存到本地可以自行封装一个方法storage
在这里插入图片描述
直接调用即可this.$storage.setLocal

进入页面的情况首先想到created钩子（详解:浅谈vue created的使用）
这样就可以进入页面保存本地啦！
就这样即可把url的参数保存到本地。

每天分学习，加油！

MscBey
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中保留事件原来的参数
weixin_42928456的博客
12-03 2132
我在做vue项目时，引入了一个插件vue-draggable-resizable。插件里封装了一些方法，该方法有定义好的参数。 <vdr v-for="item in allData" :key="item.id" :x="item.x" :y="item.y" :w="item.width" ...
Vue axios获取token临时令牌封装案例
10-14
在开发架构上，前端页面基于Vue构建，使用axios处理网络请求。为了简化流程，开发者可能会选择使用`vue add axios`命令将axios集成到项目中。同时，Vuex作为全局状态管理器，可以方便地在组件间共享和管理token。...
vue不通过路由直接获取url中参数的方法示例
12-09
前言 众所周知vue中使用路由的方式设置url参数，但是这种方式必须要在路径中附带参数，而且这个参数是需要在vue的路由中提前设置好的。 相对来说，在某些情况下直接在url后面拼接？mid=100的方式传递参数更灵活，你不需要设置路由，只需要在url后拼接参数即可，但是这种方式就需要通过javascript获取并提取url中的参数，通过传统的方式直接在页面中获取是行不通的了，因为vue中是无法通过location.search()来获取url问号之后的内容的。 当然，这个问题也有解决方法，就是把获取参数的脚本代码注册成全局方法就可以了。下面话不多说了，来一看看详细的方法示例吧。 示例代码
vue前端页面跳转参数传递及存储
weixin_34072857的博客
10-10 497
不同页面间进行参数传递，实现方式有很多种，最简单最直接的方式就是在页面跳转时通过路由传递参数，如下所示。 路由传递参数 this.$router.push({ name: '跳入页面', params: { pid: pid, } }) 实现方式如上所示，利用router.push方法可以从当前页面跳入指定的页面，跳入的页面通过name属性来确定。name属...
vue-路由传参，页面刷新参数不丢失
xxuxioxx的博客
03-01 3243
vue路由传参，参数不丢失
vue保存页面的值_vue前端页面跳转参数传递及存储
weixin_39981360的博客
12-21 1089
不同页面间进行参数传递，实现方式有很多种，最简单最直接的方式就是在页面跳转时通过路由传递参数，如下所示。路由传递参数this.$router.push({name: '跳入页面',params: {pid: pid,}})实现方式如上所示，利用router.push方法可以从当前页面跳入指定的页面，跳入的页面通过name属性来确定。name属性里面的内容是在路由routes中定义的。如下所示：co...
router vue 动态改变url_如何在Vue中使用Vue-Router保存URL查询参数
weixin_29532927的博客
01-11 490
随着默认Vue 2.x安装，路由器文件位于src/router/index.js我能够然后检查是否需要修改请求并添加任何缺少的查询参数(修改to var显然没有效果)，然后调用next(.. new rout..)的“重定向”。缺点：双打的呼叫路由，因为它本质上重定向潜在上升空间：它的工作原理，以及查询保存逻辑是在同一个地方。一个警告：在页面加载时，路由器会触发并且“from”是一条非常空的路径(...
Vue3获取地址栏参数
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
04-23 3333
Vue3 获取地址栏参数有两个方式：查询参数和路径参数。Vue3获取地址栏参数是从路由router中获取，查询参数和路径参数获取方式不一样。
利用vuex实现页面跳转参数存储获取
weixin_37582804的博客
03-26 1737
1.vue中我们用于页面跳转有三种方式 第一种：相当于get请求，参数会直接带在地址栏后path+query,path是路由的全路径。 接收页面用this.$route.query.feature来获取 第二种：相当于post请求，参数不会直接带在地址栏后name+params 接收页面用this.$route.params.feature来获取 第三种： 利用vuex来存储调转时页面的参数，...
uniapp移动app实现将网页保存为图片到手机相册
02-04
本话题主要关注如何在uniapp中实现一个功能，即“将网页保存为图片并保存到手机相册”。这个功能在很多场合都十分实用，例如用户想保存网页内容作为参考或者分享给他人。 首先，我们需要理解uniapp的架构。uniapp是...
weather-app-vue:用vue.js编写的天气应用
03-09
用户输入的地点会被存储在Vue实例的data属性中，并在用户点击“添加”按钮时触发一个方法，该方法可能负责向本地存储中保存新位置。 4. **本地存储**：为了在页面刷新后保持位置列表，应用使用了浏览器的...
常见的vue面试题.docx
01-30
- MVVM（Model-View-ViewModel）模式则在MVC基础上进一步抽象，ViewModel作为Model和View之间的桥梁，实现了数据的自动双向绑定，使得视图的改变能反映到数据模型，反之亦然。 2. **使用Vue的好处** - 响应式编程...
vue下axios拦截器token刷新机制的实例代码
11-21
5. **错误处理**：如果刷新token失败或收到错误状态码（例如，登录状态已失效），则清除localStorage中的token，提示用户重新登录，并重定向到登录页面。 6. **全局axios配置**：`request`函数封装了axios的基本...
vue路由传参，刷新页面不丢失参数
weixin_44440116的博客
01-01 3988
1.使用params传参 通过配置name传参，name是你要跳转的路由名字 this.$router.push({ name: 'content', params: { id: id } }) 在content页面，使用params获取 created () { this.articleId = this.$route.params.id } 在router路由配置...
vuex的基本规则
漏网之鱼的博客
09-17 325
Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则： 应用层级的状态应该集中到单个 store 对象中。 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。 异步逻辑都应该封装到 action 里面。 state [type: Object] const store = new Vuex.Store({ state: { count: 1 } mutations: ... }) modules const module
vue路由跳转携带参数拼接url后面，且刷新不丢失
ZXH0122的博客
07-28 1251
路由携带参数跳转时，参数拼接url后，刷新参数不丢失
vue 路由跳转四种方式 (带参数)
m0_49661870的博客
11-23 2830
详解vue 路由跳转四种方式 (带参数)：https://www.jb51.net/article/160401.htm 1. router-link <!-- 1. 不带参数 --> <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> <!-- name,path都行, 建议用name 注意：router-link中.
vue获取浏览器url参数
dachuichaobang的博客
05-11 4468
前段时间写的后台管理 有个需求：订单页面生成二维码图片 扫描二维码跳转至app页面 第一次经历哇！！！ 从扫描二维码跳转过来的时候 url里边携带订单id（参数） 例如 http://www.hahaha.com/list?orderId=214285#/home 外部进入的url会放在VUE项目编译以后自动加 “#/” ，其中带的参数在#/之前，那么我们只能用JS的方法来获取 在methods中定义方法 获取到参数 /* 获取地址栏url参数 */ getUrlKey() {
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
最新发布
qq_37752382的博客
07-15 434
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
vue 项目 打包以后 页面刷新 路由参数消失
09-04
在 Vue 项目中，当我们使用 Vue Router 创建了带有路由参数的页面，并将项目打包后，如果我们在页面刷新时发现路由参数消失了。这是因为在打包后的项目中，Vue Router 将路由参数创建为前端路由，在刷新页面时，浏览器会向服务器发送请求获取页面，而服务器只返回打包后的静态文件，没有保存路由参数的信息。 为了解决这个问题，我们可以使用一些方法来保存并恢复路由参数。一种常见的方法是使用服务端渲染 (SSR)。通过 SSR，我们可以在服务器端将路由参数一同传递给浏览器，以便在页面刷新时能够恢复参数。但是，SSR 需要特殊的设置和服务器支持，并且会增加项目的复杂性和开发难度。 另一种方法是使用浏览器的本地存储机制，如 localStorage 或 sessionStorage。在页面加载时，我们可以将路由参数存储在本地存储中，然后在页面刷新后，通过读取本地存储中的参数来恢复。这种方法相对简单，但需要我们手动管理本地存储的数据，以确保数据的正确性和安全性。 除了以上两种方法，还可以考虑使用 URL 查询参数来保存路由参数。在页面加载时，我们可以通过读取 URL 查询参数来获取路由参数，并在刷新页面时，将参数添加到 URL 中以便浏览器重新获取。这个方法相对简单，但会在 URL 上暴露参数，可能对用户体验和安全性产生影响，需要谨慎使用。 综上所述，当 Vue 项目打包后，在页面刷新时路由参数会消失，我们可以考虑使用 SSR、浏览器本地存储或 URL 查询参数来保存和恢复路由参数。根据项目的需求和实际情况，选择最合适的方法来解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值