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中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
156 2
|
26天前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
28天前
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
29天前
|
JavaScript
vue封装一个查询URL参数方法
通过以上步骤,我们在Vue.js项目中封装了一个查询URL参数的方法 `getQueryParam`,并在Vue组件中成功应用。这种封装方式不仅提高了代码的复用性,还使得代码更加清晰和易于维护。
14 1
|
1月前
|
JavaScript
vue封装一个查询URL参数方法
通过以上步骤,我们在Vue.js项目中封装了一个查询URL参数的方法 `getQueryParam`,并在Vue组件中成功应用。这种封装方式不仅提高了代码的复用性,还使得代码更加清晰和易于维护。
14 1
|
4月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
67 5
|
4月前
|
缓存 前端开发 JavaScript
输入URL到页面渲染的全过程
输入URL到页面渲染的全过程
36 1
|
4月前
|
JavaScript Linux 应用服务中间件
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
|
4月前
|
API UED 开发者
Vaadin路由魔法:导航之舟,带你穿越页面迷宫!驾驭神奇URL,解锁无限可能!
【8月更文挑战第31天】Vaadin是一款现代Java Web开发框架,其路由机制结合前后端路由,确保流畅的用户体验和高效服务器资源利用。通过`@Route`注解和`Router`类,开发者可以轻松定义和管理页面路径。例如,`@Route("home")`可指定视图路径,而参数化路由如`@Route("user/:userId")`则允许URL传参。此外,Vaadin还提供了丰富的导航API和自定义路由事件监听器,助力开发者构建结构清晰且体验优秀的Web应用。
55 0
|
4月前
|
缓存 网络协议 JavaScript
面试常考题:输入url到页面渲染发生了什么?(前半段)
面试常考题:输入url到页面渲染发生了什么?(前半段)