首页 > 其他分享 >基于nuxt ssr页面的监控数据

基于nuxt ssr页面的监控数据

时间:2023-02-02 19:23:42浏览次数:42  
标签:www const routeInfo ssr ctyun 页面 nuxt

页面方式

1、ssr.enter:空白窗口打开页面(如浏览器打开:https://www.ctyun.cn/qzdh/b,在https://www.ctyun.cn/qzdh/点击链接选择在新窗口打开)

2、ssr.forward:在已经打开的页面点击链接在本窗口打开页面(在https://www.ctyun.cn/qzdh/,点击页面链接进入https://www.ctyun.cn/qzdh/b)

3、blank:在已有历史记录的浏览器窗口点击前进或者后退,进入页面(https://www.ctyun.cn/qzdh/b)

判断打开方式

在plugin中添加app.client,将vue的beforeEach

router.beforeEach((to, from, next) => {
    const { protocol, hostname, port } = window.location;
    const origin = window.location.origin || `${protocol}//${hostname}${port ? `:${port}` : ''}`;
    const referer = from.name ? `${origin}${from.fullPath}` : (document.referrer || window.txydWebViewReferer || '');
    const current = to.name ? `${origin}${to.fullPath}` : location.href;
    routeInfo.to = to;
    routeInfo.from = from;
    routeInfo.referer = referer;
    routeInfo.current = current;
    routeInfo.pageId = to.path;
    routeInfo.pageName = to.path;
    routeInfo.pageQuery = to.query;
    console.error('routeInfo', routeInfo)
    
    routeRecords.push({
      ...routeInfo
    })
    next();
  });

判断页面进入类型

/**
 * 获取路由类型
 * @param  {Object} to   目标路由对象
 * @param  {Object} from 来源路由对象
 * @return {String} 路由类型:enter、forward
 */

function getRouteType(to, from) {
  const isEnter = to.name && !from.name;
  // const isSpa = typeof $('html').data('n-head-ssr') === 'undefined';
  const isSpa = false
  const prefix = isSpa ? 'spa':'ssr'
  // 空白窗口页面
  if (isEnter) {
    return `${prefix}.enter`
  }
  // 点击浏览器后退哥前进
  let hasRecord = !!routeRecords.slice(0,-1).find(record => record.to.fullPath === to.fullPath) 
  return hasRecord ? '' : `${prefix}.forward`;
}

 

标签:www,const,routeInfo,ssr,ctyun,页面,nuxt
From: https://www.cnblogs.com/peace1/p/17087176.html

相关文章

  • 实现父子页面传参数
    使用iframes实现父子页面传参数B.html<buttononclick="handleEvent()">向父页面发送信息</button><p>子页面</p><script>//注册消息事件监听,接受子元素给的数据wi......
  • 关于CSS、SCSS、SASS、HTML单页面引入SCSS
    1.CSS、SCSS、SASSCSS是开发人员熟知的一种用于页面样式开发的语言,可以通过内容的分离控制减少代码的重复性,降低代码的复杂程度。SASS与SCSS都是CSS预处理......
  • 使用java python 实现 QI-页面排序-骑马钉
    链接:http://www.cnprint.org/bbs/thread/77/339531/......
  • 直播系统app源码,简洁好看的登录页面
    直播系统app源码,简洁好看的登录页面1.html <!DOCTYPEhtml><html><head>  <metacharset="UTF-8">  <title>登录界面</title>  <linkrel="stylesheet"hr......
  • 14-项目实战-图形页面
    #第三方js插件1.highchart国外:https://www.hcharts.cn/demo/highcharts/column-basic2.echats国内(推荐):https://echarts.apache.org/handbook/zh/g......
  • 12- 登陆页面
    1.创建url(项目/url.py)fromapp01.viewsimportloginurlpatterns=[#登陆页面path("login/",account.login),path("logout/",account.logout),......
  • 从云服务器 SSRF 漏洞到接管你的阿里云控制台
    0x00前言本文将以阿里云为例,对云服务中的一些攻防手法进行演示,首先利用Terraform进行ECSSSRF漏洞环境的搭建,然后通过实例中存在的SSRF漏洞一步步拿下该云服务账户......
  • 微信注册页面密码的测试用例编写
    要求: 6~18位且由数字和字母组成,注册成功,跳转页面;注册失败,请重新输入密码1.画思维导图   2.excel编写测试用例 ......
  • 小程序页面的生命周期
    #####4.6页面的生命周期#####问题-页面的生命周期函数都有哪些?1.每个小程序页面,必须拥有自己的`.js`文件,且必须调用`Page()`函数,否则报错。其中`Page()`......
  • nginx部署vue history模式项目页面刷新报404问题
    nginx部署vuehistory模式项目页面刷新报404问题解决方案:在nginx配置种添加以下代码:try_files$uri$uri//index.html示例:location/{rootdist;......