實例講解Vue.js中router傳參
更新時間：2018年04月22日 14:08:38 投稿：laozhang
本篇文章通過實例給大家分析了Vue.js中router傳參的相關知識點，對此有興趣的朋友參考學習下。
Vue-router參數(shù)傳遞
為什么要在router中傳遞參數(shù)
設想一個場景，當前在主頁中，你需要點擊某一項查看該項的詳細信息。那么此時就需要在主頁傳遞該項的id到詳情頁，詳情頁通過id獲取到詳細信息。
vue-router 參數(shù)傳遞的方式
Parma傳參
貼代碼：
/router/index.vue
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/work',
name: 'Work',
component: Work
}
]
})
組件Works傳遞一個work的id到組件Work
/components/Home/Comtent/Works.vue
// 觸發(fā)它傳遞一個對象到組件Work
getIt (id) {
this.$router.push({
path: '/work',
name: 'Work',
params: {
id: id
}
})
}
/components/Work/Index.vue
<template>
<div class="work">
work: {{id}}
</div>
</template>
<script>
export default {
name: 'Work',
data () {
return {
id: this.$route.params.id //拿到id
}
}
}
</script>
運行截圖:
query傳參
將上面的parmas改為query即可，即：
// 傳入
this.$router.push({
path: '/work',
name: 'Work',
query: {
id: id
}
})
... ...
this.$route.query.id // 獲取
parmas與query的區(qū)別
query是通過url傳遞參數(shù)，始終顯示在url中
parmas傳參，刷新頁面過后就沒有數(shù)據(jù)了，無法將獲取到的參數(shù)進行保存
總結： 這兩種參數(shù)的傳遞方式，各有各的用途，具體的還要自己親手試一試才知道，前端這個領域，還是要多多親自動手實踐。
您可能感興趣的文章:
- 詳解Vue.js項目API、Router配置拆分實踐
- vue.js vue-router如何實現(xiàn)無效路由(404)的友好提示
- 詳解Vue.js搭建路由報錯 router.map is not a function
- vue.js中Vue-router 2.0基礎實踐教程
- Vue.js實戰(zhàn)之利用vue-router實現(xiàn)跳轉頁面
- Vue.js路由vue-router使用方法詳解
- Vue.js：使用Vue-Router 2實現(xiàn)路由功能介紹
- Vue.js系列之vue-router(上)(3)
- Vue.js路由組件vue-router使用方法詳解
- Vue.js第二天學習筆記（vue-router）
相關文章
TagsInput 是一種可編輯的輸入框，通過回車或者分號來分割每個標簽，用回退鍵刪除上一個標簽。這篇文章主要介紹了vue組件TagsInput的相關知識,需要的朋友可以參考下2020-05-05
element-ui tree結構實現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結構實現(xiàn)增刪改自定義功能代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue使用Google地圖的實現(xiàn)示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
vue中el-table多級嵌套列表(菜單使用el-switch代替)
本文主要介紹了el-table多級嵌套列表(菜單使用el-switch代替)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
這篇文章主要介紹了淺談vue 二級路由嵌套和二級路由高亮問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
3封裝全局Dialog組件相信大家都不陌生,下面這篇文章主要給大家介紹了關于Vue3封裝全局Dialog組件的實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
vue3 組合式API defineEmits() 與 emits 組
在Vue中,defineEmits()是Vue3組合式API中用于聲明自定義事件的,而emits選項則用于Vue2和Vue3的選項式API中,defineEmits()允許使用字符串數(shù)組或對象形式聲明事件,emits選項也支持這兩種形式,且驗證函數(shù)可以驗證事件參數(shù),這兩種方法都是為了更規(guī)范地在組件間通信2024-09-09
提起幫助文檔，想必大家都會想到?VuePress等。但是VuePress是“靜態(tài)網(wǎng)站生成器”，需要我們自行編寫文檔，然后交給VuePress變成網(wǎng)站。因此，本文將用vite2+Vue3編寫一個在線幫助文檔工具，需要的可以參考一下2022-03-03
最近在使用Vue.js時候沒有自動提示,就很難受,下面這篇文章主要給大家介紹了關于Vue3沒有代碼提示問題的解決辦法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue計算屬性+vue中class與style綁定,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03