vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title

简介: vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
一、本地存储:
localStorage.setItem('uqid','REgaI2eAT9yDfpdc');    //存储本地(传死参)
var uqid = localStorage.getItem('uqid');            // 获取存储本地值
或者
var orderSn = 20;
localStorage.setItem('orderSn',orderSn);
var uqid = localStorage.getItem('orderSn');
二、获取自定义--------data-id
bindList(e){
  var autoId = $(e.currentTarget).attr('data-id');        //获取div -data   
},
三、获取链接---url参数
http://localhost:8080/#/lineitem?uqid =2019032817530157997           (获取---uqid )
bindList(){
  var uqid = utils.getUrlKey('uqid');
  alert(uqid );
},
以上获取url参数需要引入js文件----utils.js
/* eslint-disable */
export default{
    getUrlKey: function (name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    }
}
main.js全局引入下
import utils from './assets/js/utils.js'   //获取url参数
global.utils = utils;
四、页面跳转返回
 @click="bindReturn"
methods:{
  bindReturn(){
    this.$router.go(-1);                          //返回上一页,
  },      
  bindOrider(){   
    this.$router.push({path: '/doctorlist'});     //页面跳转
  },
}
router/index.js文件中
import doctorList from '@/components/doctorlist'
export default new Router({
  routes: [
    { 
        path:'/doctorlist',
        name:'doctorList ',
        component:doctorList ,
        meta: {
          title: '我是修改后的页面title'
        }
      },
  ]
})
修改页面title--main.js 最后添加
// 修改页面title
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
})
相关文章
|
3月前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
184 2
|
3天前
|
存储 Java API
在springboot中缩短一个url链接
URL缩短服务是现代应用中常见的需求,用于将长URL映射为简短的唯一代码,便于分享。该服务具备多种功能,如自动过期、访问统计、防止重复及安全机制。通过Spring Boot构建RESTful API,使用H2数据库存储数据,Java UUID生成短码,并通过定时任务清理过期URL。用户可通过API提交长URL获取短链接,查询访问量,系统会自动重定向并记录访问次数。每天午夜自动清理过期URL,确保数据整洁。此项目结构清晰,涵盖实体类、Repository、Service和Controller等核心组件,适合快速开发和扩展。
|
1月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
1月前
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
1月前
|
JavaScript
vue封装一个查询URL参数方法
通过以上步骤,我们在Vue.js项目中封装了一个查询URL参数的方法 `getQueryParam`,并在Vue组件中成功应用。这种封装方式不仅提高了代码的复用性,还使得代码更加清晰和易于维护。
18 1
|
1月前
|
JavaScript
vue封装一个查询URL参数方法
通过以上步骤,我们在Vue.js项目中封装了一个查询URL参数的方法 `getQueryParam`,并在Vue组件中成功应用。这种封装方式不仅提高了代码的复用性,还使得代码更加清晰和易于维护。
17 1
|
2月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
62 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
1月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
78 0
|
2月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
22 1
|
2月前
|
JavaScript 前端开发 安全
如何在 Vue 页面中禁止选择、右键、复制及 F12 开发者工具
【10月更文挑战第3天】 在前端开发中,保护页面内容不被随意复制或查看是一个常见需求。本文介绍了如何在 Vue 应用中实现禁止文本选择、右键菜单、复制操作以及 F12 开发者工具的方法。通过结合 CSS 和 JavaScript 事件监听,我们可以增加用户查看和复制内容的难度,尽管无法完全阻止高级用户。适当的防护措施可以为内容提供一层额外的保护,帮助开发者提升页面安全性。
467 0
下一篇
DataWorks