前言：
vue里面怎樣從后臺(tái)渲染列表，怎么根據(jù)文章的id獲取文章的具體內(nèi)容。以及值與值之間的傳遞，vue-router 里query和params的區(qū)別及使用。
一、query和params
先來看看query和params是怎樣傳值和接收參數(shù)的吧！后面會(huì)用到的哦！
（1）query方式傳參和接收參數(shù)
query相當(dāng)于get請(qǐng)求，頁面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)
傳遞參數(shù)：把數(shù)據(jù)發(fā)送出去
|
1
2
3
4
5
6
|
this.$router.push({ path:'/aaa/bbb/ccc', query:{ id:aaaid }}) |
接收參數(shù)：在其他的組件中接收傳過來的參數(shù)
|
1
|
this.$route.query.id |
*注：接收參數(shù)是r o u t e ∗ ! ! ! ∗ ∗ 而 不 是 route*!!!** 而不是route∗!!!∗∗而不是router!
$route是當(dāng)前router跳轉(zhuǎn)的對(duì)象，可以獲取router實(shí)例里的name、path、query、pramas。
（2）params方式傳參和接收參數(shù)
params相當(dāng)于post請(qǐng)求，參數(shù)不會(huì)在地址欄中顯示。
傳參：
|
1
2
3
4
5
6
|
this.$router.push({ name:'aaa', params:{ id:aaaid }}) |
接收參數(shù)：
|
1
|
this.$route.params.id |
注意：params傳參，push里面是name不是path??！
二、從后臺(tái)渲染列表
這里我們要?jiǎng)?chuàng)建一個(gè)vue組件，名為ArticleList，用于存放渲染的文章列表。
下面是ArticleList的父組件：
假設(shè)叫information
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<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("連接成功"); // 這里多打印一句提示，只是為了更直觀一點(diǎn) console.log(res); // res 是后端回傳的數(shù)據(jù)，如果連接成功，可以把res打印出來。 this.project_article_Data=res.data.datas }) .catch(function (error) { console.log("連接失敗"); // 作用同上 console.log(error); // 如果連接失敗，會(huì)拋出錯(cuò)誤信息。 }); }, },}</script><style scoped lang="scss">//這里就不寫css了</style> |
在ArticleList組件里面寫入：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<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, //注冊(cè)父組件中導(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)建一個(gè)名為“article_content”的vue組件，用來放置文章的詳情信息。
acticle_content如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<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ā)布時(shí)間:{{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: { //給后臺(tái)傳遞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("連接成功"); // 這里多打印一句提示，只是為了更直觀一點(diǎn) 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); // 如果連接失敗，會(huì)拋出錯(cuò)誤信息。 }); }, },};</script> |
在index.js中去注冊(cè)組件（router），注意路徑!!!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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獲取詳細(xì)信息，id就藏在點(diǎn)擊事件里面，當(dāng)點(diǎn)擊時(shí)，就跳轉(zhuǎn)到詳情頁并把此時(shí)傳過來的id傳給后臺(tái)，在詳情頁上根據(jù)id獲取后臺(tái)返回的數(shù)據(jù)并渲染出來。
到此這篇關(guān)于vue從后臺(tái)渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情的文章就介紹到這了,更多相關(guān)vue后臺(tái)渲染文章列表及根據(jù)id跳轉(zhuǎn)文章內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_48931875/article/details/111072161
