這次帶給大家如何使用Vue.js中router傳參，使用Vue.js中router傳參的注意事項有哪些，下面就是實戰案例，一起來看一下。
Vue-router參數傳遞
為什麼要在router中傳遞參數
設想一個場景，目前在首頁中，你需要點擊某一項查看該項的詳細資訊。那麼此時就需要在首頁傳遞該項的id到詳情頁，詳情頁透過id取得到詳細資料。
vue-router 參數傳遞的方式
Parma傳參
貼程式碼：
##/ router/index.vue
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/work',
name: 'Work',
component: Work
}
]
})// 触发它传递一个对象到组件Work
getIt (id) {
this.$router.push({
path: '/work',
name: 'Work',
params: {
id: id
}
})
}<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 // 获取以上是如何使用Vue.js中router傳參的詳細內容。更多資訊請關注PHP中文網其他相關文章！
