vue 跨域请求数据，点击列表转详情页

以腾讯校招公告接口为例：https://join.qq.com/api/v1/noticeDynamic/getNoticeDynamicList 

在view文件夹里分别创建 列表页Lb.vue和内容页Nr.vue,并在router路由文件index.js里引入

没设置跨域之前访问不到数据，控制台以Access to XMLHttpRequest开头的报错，这就是跨域.

解决：src文件夹同级目录创建vue.config.js

vue.config.js内容：

module.exports = {
  devServer: {
    proxy: {
      // 配置跨域，请求后端接口
      "/tx": {
        target: "https://join.qq.com/",
        changeOrigin: true,
        pathRewrite: {
          '^/tx': ''
        },
      },
    },
  },
};

Lb.vue内容：

<template>
  <div>
    <!-- banner -->
    <div class="dt_banner">
      <div class="dt_bannertext">
        <p>招聘动态</p>
        <p>腾讯 2022 秋季校园招聘</p>
      </div>
    </div>

    <div class="dt_conter">
      <div class="dt">
        <div class="dt_title">校招公告</div>
        <div class="dt_box">
          <div class="dt_item" v-for="(item,i) in data" :key="item.id">
            <router-link class="lb" :to="`/nr/?id=${i}`">
              <div class="dt_date">{{ item.title }}</div>
              <div class="dt_time">{{ item.createdTimeTxt }}</div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name:'Lb',
  data() {
    return {
      data: null,
    };
  },
  created(){
    this.getTabsList();
  },
  methods: {
    getTabsList() {
      let url="/tx/api/v1/noticeDynamic/getNoticeDynamicList"
      axios.get(url).then(res=>{
        console.log(res);
        this.data=res.data.data.listBefore
        // console.log(this.data);
      })
    },
    
  },
};
</script>
<style scoped>
.link {
  color: #fff;
}
.dt_banner {
  background-size: cover;
  background-image: url("../assets/img/dynamic_banner.jpeg");
  width: 100%;
}
.dt_bannertext {
  display: inline-block;
  margin-top: 7rem;
  color: #fff;
}
.dt_bannertext p:first-child {
  margin-left: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 0.7466666666666667rem;
}
.dt_bannertext p:nth-child(2) {
  margin-left: 2rem;
  margin-top: 1.4rem;
  padding-bottom: 6rem;
}
.dt_conter {
  margin-top: -1.64rem;
  padding-top: 1rem;
  background-color: #f5f5f5;
  border-radius: 1.64rem 1.64rem 0 0;
}
.dt_title,
.content_title {
  font-size: 1.2rem;
  font-weight: 600;
  font-family: TencentSansW7;
  line-height: 0.7466666666666667rem;
  margin: 1rem;
}
.dt_box {
  margin: 0 0.6rem;
  text-align: left;
  background-color: #fff;
  border-radius: 1rem;
  padding: 1rem 2rem 1rem 2rem;
}
.dt_item {
  position: relative;
  margin: 0 0 1.6rem 0;
}
.lb {
  color: #1a1a1a;
}
.dt_time {
  margin-top: 1rem;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.4);
}
</style>

 Nr.vue内容：

<template>
  <div>
    <!-- banner -->
    <div class="dt_banner">
      <div class="dt_bannertext">
        <p>招聘动态</p>
        <p>腾讯 2022 秋季校园招聘</p>
      </div>
    </div>
    <div class="dt_conter">
      <div replace class="cont" v-html="data">
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    // window.scrollTo(0,0);
    let id = this.$route.query.id;
    console.log(`id:${id}`);
    let url = "/tx/api/v1/noticeDynamic/getNoticeDynamicList";
    axios.get(url).then(res => {
      //数据第三个加载不出来给它替换成第九个内容
      if (id==2) {
        id=8
      }
      this.data = res.data.data.listBefore[id].cont;
      // console.log(this.data);
    });
  },
};
</script>
<style>
.cont input ,.cont image{
  width: 100%;
  height: 100%;
}
.dt_banner {
  background-size: cover;
  background-image: url("../assets/img/dynamic_banner.jpeg");
  width: 100%;
}
.dt_bannertext {
  display: inline-block;
  margin-top: 7rem;
  color: #fff;
}
.dt_bannertext p:first-child {
  margin-left: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 0.7466666666666667rem;
}
.dt_bannertext p:nth-child(2) {
  margin-left: 2rem;
  margin-top: 1.4rem;
  padding-bottom: 6rem;
}
.dt_conter {
  margin-top: -1.64rem;
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 1.64rem 1.64rem 0 0;
}
.cont {
  color: #1a1a1a;
  line-height: 22px;
}
.cont img {
  width: 343.33px;
}
</style>

router里的index.js内容：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
  {
    path: '/lb:id?',
    component: () => import('../views/Lb.vue'),
    meta:{
      title: "校招公告",
    }
  },
  {
    path: '/nr',
    component: () => import('../views/Nr.vue'),
  },
];
const router = new VueRouter({
  // 默认不写 是hash 模式， 路径会带 #
  // 打包后不需要任何特殊处理， 就能上线服务器
  mode: "history", //路径没有# 但是上线服务器需要特殊处理， 否则刷新会报错
  base: process.env.BASE_URL,
  routes,
});
export default router;

点击列表第二个效果图：

标签：vue,跨域,color,data,详情页,rem,dt,margin
来源： https://blog.csdn.net/D_evin_/article/details/121672890