vue中从后台渲染文章列表及根据id跳转文章详情

前言：vue里面怎样从后台渲染列表，怎么根据文章的id获取文章的具体内容。以及值与值之间的传递，vue-router 里query和params的区别及使用。

一、query和params

先来看看query和params是怎样传值和接收参数的吧！后面会用到的哦！

（1）query方式传参和接收参数

query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数

传递参数：把数据发送出去

this.$router.push({
	path:'/aaa/bbb/ccc',
	query:{
		id:aaaid
	}
})

接收参数：在其他的组件中接收传过来的参数

this.$route.query.id

*注：接收参数是$route\ast !!!\ast \ast 而不是$router!

$route是当前router跳转的对象，可以获取router实例里的name、path、query、pramas。

（2）params方式传参和接收参数

params相当于post请求，参数不会在地址栏中显示。

传参：

this.$router.push({
	name:'aaa',
	params:{
		id:aaaid
	}
})

接收参数：

this.$route.params.id

注意：params传参，push里面是name不是path！！

二、从后台渲染列表

这里我们要创建一个vue组件，名为ArticleList，用于存放渲染的文章列表。

下面是ArticleList的父组件：

假设叫information

<template>
  <div class="Information">
    <section>
		<p>文章列表为：</p>
        <ArticleList
          :ArticleList_props_Data="ArticleList_props_Data"
          :project_article_Data="project_article_Data"
        ></ArticleList>
        //给子组件传值
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios';
import Qs from 'qs';
import ArticleList from "@/components/ArticleList";

export default {
  name: "information",
  components: {
    ArticleList,
  },
  data() {
    return {
		
      current:'1',
      ArticleList_props_Data: {
        current_path: '/index/information'
      },
        
      project_article_Data: [
          {
            id: ``,
        	title: ``,
        	intro: ``,
        	text: ``,
        	issue_time: ``,
        	source:``
          }
      ]

    }
  },

  created(){
    this.get_project_article_Data()
  },

  methods: {

    get_project_article_Data() {

      axios({
        url: `/API/aaa/bbb/ccc/project?${this.current}`, // 后端的接口地址
        method: "get",
        params: {
         page: this.current,
        },
        transformRequest: [
          function (data) {
            data = Qs.stringify(data);
            return data;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
        dataType: "json",
      })
        .then((res) => {
          console.log("连接成功"); // 这里多打印一句提示，只是为了更直观一点
          console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
          this.project_article_Data=res.data.datas
        })
        .catch(function (error) {
          console.log("连接失败"); // 作用同上
          console.log(error); // 如果连接失败，会抛出错误信息。
        });
    },
  },
}
</script>

<style scoped lang="scss">
//这里就不写css了
</style>

在ArticleList组件里面写入：

<template>
  <div class="hello">
    <div class="project_content">
      <div
        class="project_article_box"
        v-for="item in project_article_Data"
        :key="item.id"
      >
        <h1
          class="project_article_title"
          @click="to_article_content(item.id)"
        >
          <a href="javascript:">{{ item.title }}</a>
        </h1>
        <p class="project_article_intro">{{ item.intro }}</p>
        <p class="project_issue_time">
          <span>{{item.issue_time}}</span>来源: {{ item.source }}
        </p>
        <a-divider />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "articlelist",
  props: {
    project_article_Data: Array,  //注册父组件中导入的数据
    ArticleList_props_Data: Object,
  },
  data() {
    return {
    };
  },
  methods: {
      //根据文章id跳转文章详情
    to_article_content(article_id) {
      this.$router.push({
        path: `${this.ArticleList_props_Data.current_path}/article_content`,
          //根据路径跳转到文章在详情页并给详情页传递id
        query: { article_id: article_id },
      });
    },
  },
};
</script>


<style scoped lang="scss">

</style>

(4)根据id获取文章详情

再创建一个名为“article_content”的vue组件，用来放置文章的详情信息。

acticle_content如下：

<template>
  <div class="Article_Content">
    <section>
      <div id="content">
        <div class="article_container">
          <p>article_id：{{ $route.query.article_id }}</p>
          <p class="article_text_title">
            {{article_text_title}}
          </p>
          <p class="article_text_message">发布时间:{{article_text_message}}</p>
          <a-divider />
          <p class="article_text_content" v-html="this.article_text_content">
          </p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  name: "Article_Content",
  props: {

  },
  data() {
    return {
      article_id: this.$route.query.article_id, //通过路径跳转传过来的id
      article_text_title:"",
      article_text_message:'',
      article_text_content:'',
    };
  },
  created() {
    this.get_article_data(this.article_id);
  },
  methods: {

    /*
        功能：获取文章内容
        参数：article_id       文章id
    */
    get_article_data(article_id) {
		//获取传过来的具体id值
      axios({
        url: `/API/aaa/bbb/${this.article_id}`, // 后端的接口地址
        method: "get",
        params: {
          //给后台传递id地址
          id: this.article_id,
        },
        transformRequest: [
          function (data) {
            data = qs.stringify(data);
            return data;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
        dataType: "json",
      })
        .then((res) => {
          console.log("连接成功"); // 这里多打印一句提示，只是为了更直观一点
          console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
          this.article_text_title = res.data.title
          this.article_text_message= res.data.issue_time
          this.article_text_content=res.data.content
          this.article_category=res.data.article_category
        })
        .catch(function (error) {
          console.log("连接失败"); // 作用同上
          console.log(error); // 如果连接失败，会抛出错误信息。
        });
    },
  },
};
</script>

在index.js中去注册组件（router），注意路径!!!

import information from '@/components/information'
import ArticleList from '@/components/ArticleList'
import Article_Content from '@/pages/Article_Content'

const router = [
    
    {
    	path: '/index/information',
    	name: 'information',
    	component: nformation,
  	},
    
    {
        path: '/index/information/article_content',
    	name: 'article_content',
    	component: article_content
    }
]

三、总结

1、params和query的区别及使用

2、根据id获取详细信息，id就藏在点击事件里面，当点击时，就跳转到详情页并把此时传过来的id传给后台，在详情页上根据id获取后台返回的数据并渲染出来。

本文地址：https://blog.csdn.net/weixin_48931875/article/details/111072161