路由組件傳參：如果在一個頁面中，需要根據路由去獲得參數，去對頁面進行一些邏輯處理，首先可以通過this.$router來獲取路由實例的參數，這樣頁面組件和路由就進行了耦合，為了進行分離，更大程度復用，我們推出了路由組件傳參的實現方案：

• 第一種傳參方式為：布爾模式，它適用于有動態路由傳參的路由配置中，實現思路為：將路由的參數作為屬性來傳入到組件中 <template><div>{{ name }}</div> </template><script> export default {props: {name: {type: String,default: 'apple'}} } </script> <style lang="less" scoped></style> {path: '/argu/:name',component: () => import('@/views/argu.vue'),props: true}

  這樣隨著不同的url里的參數錄入，組件都會展示對應的參數數據

• 第二種傳參方式為：對象模式，這種模式適用于普通傳統的路由類型，沒有參數，實現思路為，直接在組件里定義一個屬性，然后路由列表中定義一個路由對象的屬性值，默認情況下取的是組件里的默認值，存在各個路由對象下則取對應路由對象的屬性值：

<template><div class="about"><h1>This is an about page</h1><d>{{ food }}</d></div> </template> <script> export default {props: {food: {type: String,default: 'apple'}} } </script> {path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),props: {food: 'banana'}}

• 第三種傳參方式為：函數模式，適合于在傳入的屬性中，能夠根據當前的路由，來做一些處理邏輯，從而設置傳入組件的屬性值，就是如果URL+參數，實現傳遞不同的內容給組件，實現邏輯：路由列表中以函數方式同等屬性名（food）來獲取當前路由實例的指定屬性的值：route.query.food，然后組件中定義同名屬性以承接路由列表傳遞的屬性值，然后供業務邏輯處理呈現

　　　　

{path: '/',name: 'home',alias: '/home_page',component: Home,props: route => ({food: route.query.food})} props: {food: {type: String,default: 'apple'}}

?

轉載于:https://www.cnblogs.com/cristin/p/9632601.html

總結

以上是生活随笔為你收集整理的Vue-admin工作整理（四）：路由组件传参的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。