app嵌套h5，h5的处理

app嵌套h5,性能提升，举例：app端点击文章列表，跳转到h5的文章详情，首先h5需要app传文章id

h5前期工作

1. vue-cli搭建环境，配置路由，跑起来之后
2. 做相应的页面
3. 对相应的页面进行处理

对应的详情页面

<template>
  <div class="container">
    <div class="hello" v-html="content"></div>
    <div class="bottom">
      <img src="../assets/images/zan.png" class="support" alt="" />
      <span class="support-num">赞&nbsp;{{ favourCount }}</span>
    </div>
  </div>

这里渲染之前要调取接口，拿到相应的文章id，这就需要获取地址栏中的地址及参数，首先进行判断，是否有相应的id

// 获取文章详情接口
    getArticleDetail: function () {
      let urlParams = window.location.href; //获取url中"?"符后的字串
      let index = urlParams.indexOf("?");
      this.urlRemain = urlParams.substring(index + 1, urlParams.length);
      let urllist = this.urlRemain.split("&")[0];
      let articleId = urllist.split("=")[1];
      if (articleId) {
        Axios.get(`${defaultUrl}/article/detail`, {
          params: {
            articleId: articleId,
          },
        }).then((result) => {
          this.articleData = result.data.data;
          this.content = result.data.data.content;
          this.author = result.data.data.author;
          this.favourCount = result.data.data.favourCount;
        });
      }else{
        console.log("没有对应的id")
      }
    },

工作做完就需要把做好的页面地址给到app端

首先有相应的服务器，h5：npm run build之后部署到服务器，获取到相应的地址，把地址给到app端，app端讲相应的id拼接到地址栏上就可以了，h5已经对相应的地址进行过处理，就不需要在进行对地址判断了