前言：
vue里面怎樣從后臺渲染列表，怎么根據文章的id獲取文章的具體內容。以及值與值之間的傳遞，vue-router 里query和params的區別及使用。
一、query和params
先來看看query和params是怎樣傳值和接收參數的吧！后面會用到的哦！
（1）query方式傳參和接收參數
query相當于get請求，頁面跳轉的時候，可以在地址欄看到請求參數
傳遞參數：把數據發送出去
|
1
2
3
4
5
6
|
this.$router.push({ path:'/aaa/bbb/ccc', query:{ id:aaaid }}) |
接收參數：在其他的組件中接收傳過來的參數
|
1
|
this.$route.query.id |
*注：接收參數是r o u t e ∗ ! ! ! ∗ ∗ 而 不 是 route*!!!** 而不是route∗!!!∗∗而不是router!
$route是當前router跳轉的對象，可以獲取router實例里的name、path、query、pramas。
（2）params方式傳參和接收參數
params相當于post請求，參數不會在地址欄中顯示。
傳參：
|
1
2
3
4
5
6
|
this.$router.push({ name:'aaa', params:{ id:aaaid }}) |
接收參數：
|
1
|
this.$route.params.id |
注意：params傳參，push里面是name不是path！！
二、從后臺渲染列表
這里我們要創建一個vue組件，名為ArticleList，用于存放渲染的文章列表。
下面是ArticleList的父組件：
假設叫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("連接成功"); // 這里多打印一句提示，只是為了更直觀一點 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組件里面寫入：
|
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, //注冊父組件中導入的數據 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如下：
|
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">發布時間:{{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），注意路徑!!!
|
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 }] |
三、總結
1、params和query的區別及使用
2、根據id獲取詳細信息，id就藏在點擊事件里面，當點擊時，就跳轉到詳情頁并把此時傳過來的id傳給后臺，在詳情頁上根據id獲取后臺返回的數據并渲染出來。
到此這篇關于vue從后臺渲染文章列表以及根據id跳轉文章詳情的文章就介紹到這了,更多相關vue后臺渲染文章列表及根據id跳轉文章內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_48931875/article/details/111072161
