vue從后臺(tái)渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情詳解

第vue從后臺(tái)渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情詳解vue里面怎樣從后臺(tái)渲染列表，怎么根據(jù)文章的id獲取文章的具體內(nèi)容。以及值與值之間的傳遞，vue-router里query和params的區(qū)別及使用。

一、query和params

先來(lái)看看query和params是怎樣傳值和接收參數(shù)的吧！后面會(huì)用到的哦！

（1）query方式傳參和接收參數(shù)

query相當(dāng)于get請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)

傳遞參數(shù)：把數(shù)據(jù)發(fā)送出去

this.$router.push({

path:/aaa/bbb/ccc,

query:{

id:aaaid

接收參數(shù)：在其他的組件中接收傳過(guò)來(lái)的參數(shù)

this.$route.query.id

*注：接收參數(shù)是route!!!而不是route*!!!**而不是route!!!而不是router!

$route是當(dāng)前router跳轉(zhuǎn)的對(duì)象，可以獲取router實(shí)例里的name、path、query、pramas。

（2）params方式傳參和接收參數(shù)

params相當(dāng)于post請(qǐng)求，參數(shù)不會(huì)在地址欄中顯示。

傳參：

this.$router.push({

name:aaa,

params:{

id:aaaid

接收參數(shù)：

this.$route.params.id

注意：params傳參，push里面是name不是path！！

二、從后臺(tái)渲染列表

這里我們要?jiǎng)?chuàng)建一個(gè)vue組件，名為ArticleList，用于存放渲染的文章列表。

下面是ArticleList的父組件：

假設(shè)叫information

template

div>

在ArticleList組件里面寫(xiě)入：

template

div>

(4)根據(jù)id獲取文章詳情

再創(chuàng)建一個(gè)名為article_content的vue組件，用來(lái)放置文章的詳情信息。

acticle_content如下：

template

div>

在index.js中去注冊(cè)組件（router），注意路徑!!!

importinformationfrom@/components/information

importArticleListfrom@/components/ArticleList

importArticle_Contentfrom@/pages/Article_Content

constrouter=[

path:/index/information,

name:information,

component:nformation,

path:/index/information/article_content,

name:article_content,

component:article_content

1、params和query的區(qū)別及使用

2、根據(jù)