vue 跳转新窗口传递参数并改变窗口名称

vue 跳转新窗口传递参数并改变窗口名称,第1张

需求: 地址不带参数
获取之前的数据
修改窗口名称

点击跳转组件

const msg = {
		   zoom :map.getZoom()-0.5,
           lat: map.getCenter().lat,
           dataList:data,
           name:data.saveName
		};
		//sessionStorage.setItem("key", "value"); 页面临时缓存数据 
		//不能直接传对象过去 所以转成字符串
        window.sessionStorage.setItem("tagUser", JSON.stringify(msg));
        //打开新窗口
        window.open(homePageUrl + "bookNewWindow");

main.js 注册全局指令 实现动态改变窗口名称

Vue.directive('title', {
  inserted: function (el, binding) {
  //方式1,直接给v-title标签的 data-title 属性赋值
    document.title=el.dataset.title
  /// 方式2,通过指令传参({{xxx}})
    else if (value && value.title) { 
      document.title = value.title
    }
  }
})

跳转组件获取参数并改变窗口名称

        <template>
        //方式一
        //在页面最大的div上 v-title data-title=""
        //v-title进行鼠标悬浮提示 :data-title='typename' 窗口显示值
	   <div class="newWindow" v-title :data-title='typename'>
	   //方式二
		<div class="newWindow" v-myTitle="{title:typename}">
	 </div>
       </template>
        created() {
         //需要在created中赋值 窗口名字才能及时改变
           let data=JSON.parse(window.sessionStorage.getItem('tagUser'))
			this.typename=data.name
		},
		mounted() {
		  //获取参数
			let data=JSON.parse(window.sessionStorage.getItem('tagUser'))
		},

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1322143.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-12
下一篇2022-06-12

发表评论

登录后才能评论

评论列表(0条)

    保存