這次帶給大家Vue.js如何進行router傳參,Vue.js進行行router傳參的注意事項有哪些,下面就是實戰案例,一起來看一下。
Vue-router參數傳遞
為什麼要在router中傳遞參數
設想一個場景,目前在首頁中,你需要點擊某一項查看該項的詳細資訊。那麼此時就需要在首頁傳遞該項的id到詳情頁,詳情頁透過id取得到詳細資料。
vue-router 參數傳遞的方式
Parma傳參
貼程式碼:
##/ router/index.vueexport default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/work', name: 'Work', component: Work } ] })元件Works傳遞一個work的id到元件Work/components/Home/Comtent/Works.vue
// 触发它传递一个对象到组件Work getIt (id) { this.$router.push({ path: '/work', name: 'Work', params: { id: id } }) }/components/Work/ Index.vue
<template> <p class="work"> work: {{id}} </p> </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的區別query是透過url傳遞參數,始終顯示在url中# parmas傳參,刷新頁面過後就沒有數據了,無法將獲取到的參數進行保存相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀: ###
以上是Vue.js如何進行router傳參的詳細內容。更多資訊請關注PHP中文網其他相關文章!