vue2 路由傳參

vue2 路由傳參

本節是基於我的個人興趣頁面的路由傳參發現的問題和解決的問題

1.vue2的路由傳參
在頁面路由中，比如完成圖片詳情怎麼辦？
首先我們得知道圖片列表中每一張圖片的id，同時當點擊的時候，要讓電腦知道你傳遞的是哪個id的詳情：

具體實施：
首先我們要在router.js中給路由路徑一個參數id

    routes: [
        {
            path: 'imgdetai/:id',
            name: 'imgdetail',
            component: ImgDetail
        },
    ]
})

然後我們要在< router-link>中利用路由傳參的params

<router-link :to="{name:'imgdetail',
params:{
    'id':list.id,
    'imgurl':list.imgurl,
    'content':list.content,
    'tag':list.tag,
    'time':list.time,
    'click':list.click,
    'zan':list.zan
}}">
    <img :src="list.imgurl">
    <div>
        <h5>{{list.tag}}<i class="el-icon-star-off"></i><span>{{list.zan}}</span></h5>
        <p>{{list.content}}</p>
    </div> 
</router-link>

在圖片詳情主件中用$route.params.參數名來接受參數即可，這樣就能在圖片詳情頁面使用傳來的數據並一一對應起來。

.......
<ul>
    <li>喜歡<i class="el-icon-star-off"></i>{{$route.params.zan}}</li>
    <li>點擊量<i class="el-icon-view"></i>{{$route.params.click}}</li>
    <li><a href="#">更多<i class="el-icon-more"></i></a></li>
</ul>
.......

寫這個圖片詳情的時候，我曾陷入一個誤區，那就是用props來傳參，把router相關的頁面也理解成了一個父子組件，其實應該理解爲兄弟組件，所以用props來傳參並不會成功。

其實寫詳情頁面，除了路由params傳參之外還可以用vueX。