个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue从后台渲染文章列表以及根据id跳转文章详情详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

前言：

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

1、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！！ 。

2、从后台渲染列表

这里我们要创建一个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
  }
]

3、总结

1、params和query的区别及使用 。

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

到此这篇关于vue从后台渲染文章列表以及根据id跳转文章详情的文章就介绍到这了,更多相关vue后台渲染文章列表及根据id跳转文章内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://blog.csdn.net/weixin_48931875/article/details/111072161 。

最后此篇关于vue从后台渲染文章列表以及根据id跳转文章详情详解的文章就讲到这里了,如果你想了解更多关于vue从后台渲染文章列表以及根据id跳转文章详情详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： token 机制和实现方式
文章推荐： php获取本年、本月、本周时间戳和日期格式的实例代码
文章推荐： Python pandas DataFrame操作的实现代码
文章推荐： laravel-admin利用ModelTree实现对分类信息的管理
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com