一、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

//这里就不写css了

在ArticleList组件里面写入：

(4)根据id获取文章详情

再创建一个名为“article_content”的vue组件，用来放置文章的详情信息。

acticle_content如下：

在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获取后台返回的数据并渲染出来。