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();
})
相关文章
|
23天前
Vue3 防止页面闪烁 v-cloak
Vue3 防止页面闪烁 v-cloak
|
23天前
|
JavaScript 应用服务中间件 nginx
vue项目中页面遇到404报错
vue项目中页面遇到404报错
|
23天前
|
JavaScript
vue截取URL中的参数
vue截取URL中的参数
13 0
|
23天前
|
JavaScript
Vue 防止页面闪烁 v-cloak
Vue 防止页面闪烁 v-cloak
|
2月前
|
JavaScript
vue数据更新了但是页面不更新的解决方案
vue数据更新了但是页面不更新的解决方案
33 0
|
19天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue3——如何实现页面访问拦截
Vue3——如何实现页面访问拦截
|
2月前
|
缓存 JavaScript
Vue强制页面刷新--vue不留白刷新页面解决办法
Vue强制页面刷新--vue不留白刷新页面解决办法
35 3
|
23天前
|
JavaScript
Vue项目中强制刷新页面的方法
Vue项目中强制刷新页面的方法
16 0
|
4天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
14 3
|
5天前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。