Vue如何从后端动态渲染文章列表并实现按ID跳转至文章详情页？

本文共计1583个文字，预计阅读时间需要7分钟。

前言：在Vue中，如何从后端渲染列表，以及如何根据文章的id获取文章的具体内容。此外，还将讨论Vue Router中query和params的区别及其使用。

一、query和params的区别及使用

1. query和params的传递方式

- query：通过URL的查询字符串传递参数，例如：/article?id=123。- params：通过路由路径传递参数，例如：/article/123。

2. 使用场景

- query：适用于动态路由，参数变化不会导致路由路径改变，适合传递非关键参数。- params：适用于静态路由，参数变化会导致路由路径改变，适合传递关键参数。

3. 代码示例

javascript// 路由配置const router=new VueRouter({ routes: [ { path: '/article/:id', component: ArticleComponent } ]});

// 跳转路由router.push({ name: 'article', params: { id: 123 } });

二、从后端渲染列表

1. 获取后端数据

- 使用axios等HTTP库发送请求，获取后端数据。

javascriptimport axios from 'axios';

axios.get('/api/articles') .then(response=> { // 处理数据 }) .catch(error=> { // 处理错误 });

2. 渲染列表

- 使用v-for指令渲染列表。

{{ article.title }}

三、根据文章id获取文章内容

1. 发送请求

- 使用axios发送请求，根据文章id获取文章内容。

javascriptaxios.get(`/api/articles/${articleId}`) .then(response=> { // 处理文章内容 }) .catch(error=> { // 处理错误 });

2. 渲染文章内容

- 使用v-指令渲染文章内容。

{{ article.title }}

总结：通过以上步骤，我们可以实现在Vue中从后端渲染列表，并根据文章id获取文章的具体内容。同时，我们了解了Vue Router中query和params的区别及其使用。

前言：

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

一、query和params

先来看看query和params是怎样传值和接收参数的吧！后面会用到的哦！

（1）query方式传参和接收参数

query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数

传递参数：把数据发送出去

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

接收参数：在其他的组件中接收传过来的参数

this.$route.query.id

*注：接收参数是r o u t e ∗ ! ! ! ∗ ∗ 而 不 是 route*!!!** 而不是route∗!!!∗∗而不是router!

$route是当前router跳转的对象，可以获取router实例里的name、path、query、pramas。

（2）params方式传参和接收参数

params相当于post请求，参数不会在地址栏中显示。

传参：

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

接收参数：

this.$route.params.id

注意：params传参，push里面是name不是path！！

二、从后台渲染列表

这里我们要创建一个vue组件，名为ArticleList，用于存放渲染的文章列表。

下面是ArticleList的父组件：

假设叫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 是后端回传的数据，如果连接成功，可以把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, //注册父组件中导入的数据 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如下：

<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），注意路径!!!

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跳转文章内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！