前言：

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-ponent: article_content }]

三、总结

1、params和query的区别及使用

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

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