vue render the article list from the background and jump to the article details according to id

Directory foreword: 1. query and params
(1) Transmitting and receiving parameters in query mode
(2) Transmitting and receiving parameters in params mode
2. Render the list from the background
(4) Obtain article details according to id
3. Summary

Foreword:

vue inside how to render from the background list, how according to the article id to obtain the specific content of the article. As well as the transfer between values, the difference and use of query and params in vue-router.

1. query and params

Let's take a look at how query and params transmit values and receive parameters first. It will be used later!

(1) Transmitting and receiving parameters in query mode

query is equivalent to get request. When the page jumps, you can see the request parameters in the address bar

Pass parameters: Send data out

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

Receive parameters: Receive incoming parameters in other components

this.$route.query.id

* Note: The receive parameter is r o u t e *! ! ! Not route*! ! ! ** Not route! ! ! ** Not router!

$route is the object of the current router jump, and can obtain name, path, query and pramas in the router instance.

(2) Transmitting and receiving parameters in params mode

params is equivalent to an post request, and the parameters are not displayed in the address bar.

Reference:

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

Receive parameters:

this.$route.params.id

Note: params is a reference, name is not path in push! !

2. Render the list from the background

Here we are going to create an vue component, named ArticleList, to hold the list of rendered articles.

The following is the parent component of ArticleList:

Suppose it is called information

<template>
 <div class="Information">
 <section>
		<p> The list of articles is: </p>
  <ArticleList
   :ArticleList_props_Data="ArticleList_props_Data"
   :project_article_Data="project_article_Data"
  ></ArticleList>
  // Pass values to child components 
  </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}`, //  Interface address of backend 
  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(" Connection succeeded "); //  Print more here 1 Sentence prompt, just to be more intuitive 1 Point 
   console.log(res); // res  Is the data returned by the back end. If the connection is successful, you can put res Print it out. 
   this.project_article_Data=res.data.datas
  })
  .catch(function (error) {
   console.log(" Connection failed "); //  Same function as above 
   console.log(error); //  If the connection fails, an error message is thrown. 
  });
 },
 },
}
</script>

<style scoped lang="scss">
// It won't be written here css It's over 
</style>

Write to the ArticleList component:

<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:" rel="external nofollow" >{{ item.title }}</a>
  </h1>
  <p class="project_article_intro">{{ item.intro }}</p>
  <p class="project_issue_time">
   <span>{{item.issue_time}}</span> Source : {{ item.source }}
  </p>
  <a-divider />
  </div>
 </div>
 </div>
</template>

<script>
export default {
 name: "articlelist",
 props: {
 project_article_Data: Array, // Register the imported data in the parent component 
 ArticleList_props_Data: Object,
 },
 data() {
 return {
 };
 },
 methods: {
  // According to the article id Jump article details 
 to_article_content(article_id) {
  this.$router.push({
  path: `${this.ArticleList_props_Data.current_path}/article_content`,
   // Jump to the article on the details page according to the path and pass it to the details page id
  query: { article_id: article_id },
  });
 },
 },
};
</script>


<style scoped lang="scss">

</style>

(4) Obtain article details according to id

Create another vue component named "article_content" to place the details of the article.

acticle_content is as follows:

<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"> Release time :{{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, // Passed by path jump id
  article_text_title:"",
  article_text_message:'',
  article_text_content:'',
 };
 },
 created() {
 this.get_article_data(this.article_id);
 },
 methods: {

 /*
   Function: Get the content of the article 
   Parameters: article_id   Article id
 */
 get_article_data(article_id) {
		// Gets the passed concrete id Value 
  axios({
  url: `/API/aaa/bbb/${this.article_id}`, //  Interface address of backend 
  method: "get",
  params: {
   // Pass to the background id Address 
   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(" Connection succeeded "); //  Print more here 1 Sentence prompt, just to be more intuitive 1 Point 
   console.log(res); // res  Is the data returned by the back end. If the connection is successful, you can put res Print it out. 
   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(" Connection failed "); //  Same function as above 
   console.log(error); //  If the connection fails, an error message is thrown. 
  });
 },
 },
};
</script>

Register the component (router) in index. js, pay attention to the path! ! !

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
 }
]

3. Summary

1. The difference and use of params and query

2. Obtain detailed information according to id, and id is hidden in the click event. When clicking, it jumps to the details page and sends the id transmitted at this time to the background. On the details page, it obtains the data returned by the background according to id and renders it.