vue從后臺渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情詳解

更新時間：2020年12月14日 17:23:16 作者：Sandy-yan

這篇文章主要給大家介紹了關(guān)于vue從后臺渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言：

vue里面怎樣從后臺渲染列表，怎么根據(jù)文章的id獲取文章的具體內(nèi)容。以及值與值之間的傳遞，vue-router 里query和params的區(qū)別及使用。

一、query和params

先來看看query和params是怎樣傳值和接收參數(shù)的吧！后面會用到的哦！

（1）query方式傳參和接收參數(shù)

query相當(dāng)于get請求，頁面跳轉(zhuǎn)的時候，可以在地址欄看到請求參數(shù)

傳遞參數(shù)：把數(shù)據(jù)發(fā)送出去

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

接收參數(shù)：在其他的組件中接收傳過來的參數(shù)

this.$route.query.id

*注：接收參數(shù)是r o u t e ∗ ! ! ! ∗ ∗ 而不是 route*!!!** 而不是route∗!!!∗∗而不是router!

$route是當(dāng)前router跳轉(zhuǎn)的對象，可以獲取router實例里的name、path、query、pramas。

（2）params方式傳參和接收參數(shù)

params相當(dāng)于post請求，參數(shù)不會在地址欄中顯示。

傳參：

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

接收參數(shù)：

this.$route.params.id

注意：params傳參，push里面是name不是path！！

二、從后臺渲染列表

這里我們要創(chuàng)建一個vue組件，名為ArticleList，用于存放渲染的文章列表。

下面是ArticleList的父組件：

假設(shè)叫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 是后端回傳的數(shù)據(jù)，如果連接成功，可以把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:" 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>來源: {{ item.source }}
  </p>
  <a-divider />
  </div>
 </div>
 </div>
</template>

<script>
export default {
 name: "articlelist",
 props: {
 project_article_Data: Array, //注冊父組件中導(dǎo)入的數(shù)據(jù)
 ArticleList_props_Data: Object,
 },
 data() {
 return {
 };
 },
 methods: {
  //根據(jù)文章id跳轉(zhuǎn)文章詳情
 to_article_content(article_id) {
  this.$router.push({
  path: `${this.ArticleList_props_Data.current_path}/article_content`,
   //根據(jù)路徑跳轉(zhuǎn)到文章在詳情頁并給詳情頁傳遞id
  query: { article_id: article_id },
  });
 },
 },
};
</script>


<style scoped lang="scss">

</style>

(4)根據(jù)id獲取文章詳情

再創(chuàng)建一個名為“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">發(fā)布時間:{{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, //通過路徑跳轉(zhuǎn)傳過來的id
  article_text_title:"",
  article_text_message:'',
  article_text_content:'',
 };
 },
 created() {
 this.get_article_data(this.article_id);
 },
 methods: {

 /*
  功能：獲取文章內(nèi)容
  參數(shù)：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 是后端回傳的數(shù)據(jù)，如果連接成功，可以把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
 }
]

三、總結(jié)

1、params和query的區(qū)別及使用

2、根據(jù)id獲取詳細信息，id就藏在點擊事件里面，當(dāng)點擊時，就跳轉(zhuǎn)到詳情頁并把此時傳過來的id傳給后臺，在詳情頁上根據(jù)id獲取后臺返回的數(shù)據(jù)并渲染出來。

到此這篇關(guān)于vue從后臺渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情的文章就介紹到這了,更多相關(guān)vue后臺渲染文章列表及根據(jù)id跳轉(zhuǎn)文章內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: