• vue路由组件传递参数四种方式(九)(布尔模式,命名视图,对象模式,函数模式)详细讲解使用


    1.布尔模式 

    在你的组件中使用 $route 会与路由紧密耦合,这限制了组件的灵活性,因为它只能用于特定的 URL。虽然这不一定是件坏事,但我们可以通过 props 配置来解除这种行为:

    1.1 传递一个参数

    1.1.1 路由添加 props:true,当 props 设置为 true 时,route.params 将被设置为组件的 props。

    1. {
    2. path: '/Profile/:username',
    3. name: 'Profile',
    4. props: true,
    5. component: () => import('../views/profile.vue'),
    6. },

    1.1.2 传递参数

    1. <el-button>
    2. <router-link to="/Profile/name张三">Profile</router-link></el-button
    3. >

    1.1.3 页面接受参数

     props: ["username"],  注意这里的username要和前面的传递参数键对应起来

    1. <template>
    2. <div style="margin: 50px; line-height: 34px; width: 800px">
    3. <h2>profile</h2>
    4. <h3>参数为:【{{ username }}】--路由展示参数,页面刷新参数不消失</h3>
    5. <h3></h3>
    6. </div>
    7. </template>
    8. <script>
    9. export default {
    10. name: "Table",
    11. props: ["username"],
    12. components: {},
    13. data() {
    14. return {
    15. dataDraggerle1: [
    16. { student: "11", number: 1 },
    17. { student: "22", number: 2 },
    18. { student: "33", number: 3 },
    19. { student: "44", number: 4 },
    20. ],
    21. dataDraggerle2: [
    22. { student: "5", number: 5 },
    23. { student: "6", number: 6 },
    24. { student: "7", number: 7 },
    25. ],
    26. };
    27. },
    28. methods: {},
    29. mounted() {
    30. //3这里可id以看到传递的参数username
    31. console.log("mounted", this.username);
    32. },
    33. created() {
    34. //3这里可id以看到传递的参数username
    35. console.log("created", this.username);
    36. },
    37. };
    38. </script>
    39. <style scoped lang="scss">
    40. h2 {
    41. color: purple;
    42. margin-bottom: 10px;
    43. }
    44. h3 {
    45. font-size: 18px;
    46. }
    47. </style>

    2 对象传参   传递多个参数

    2.1 path后面直接写参数

    1. {
    2. path: '/Profile/:username/:userid',
    3. name: 'Profile',
    4. props: true,
    5. component: () => import('../views/profile.vue'),
    6. },

    2.2传递时也直接拼参数

    1. <el-button>
    2. <router-link to="/Profile/name张三/123">Profile</router-link></el-button
    3. >

    2.3

    1. <template>
    2. <div style="margin: 50px; line-height: 34px; width: 800px">
    3. <h2>profile</h2>
    4. <h3>
    5. 2 username参数为:【{{ username }}】--路由展示参数,页面刷新参数不消失
    6. </h3>
    7. <h3>2 userid参数为:【{{ userid }}】--路由展示参数,页面刷新参数不消失</h3>
    8. <h3></h3>
    9. </div>
    10. </template>
    11. <script>
    12. export default {
    13. name: "Table",
    14. //1
    15. props: ["username", "userid"],
    16. components: {},
    17. data() {
    18. return {};
    19. },
    20. methods: {},
    21. mounted() {
    22. //3这里可id以看到传递的参数username
    23. console.log("mounted", this.username, this.userid);
    24. },
    25. created() {
    26. //3这里可id以看到传递的参数username
    27. console.log("created", this.username, this.userid);
    28. },
    29. };
    30. </script>
    31. <style scoped lang="scss">
    32. h2 {
    33. color: purple;
    34. margin-bottom: 10px;
    35. }
    36. h3 {
    37. font-size: 18px;
    38. }
    39. </style>

    3.命名视图传递参数

    如果一个页面有多个命名视图,对于有命名视图的路由,你必须为每个命名视图定义 props 配置:

    官网例子

    1. const routes = [
    2. {
    3. path: '/user/:id',
    4. components: { default: User, sidebar: Sidebar },
    5. props: { default: true, sidebar: false }
    6. }
    7. ]

    看我的例子更加清晰明了

    2.1 比如我们上面的例子,又增加了一个底部固定的视图组件,不明白命名视图的可以看看前几期的讲解(就是我的每一个页面都要有一个顶部和一个底部组件展示商标或者logo固定的,也可以传递参数)

    第一步

    在路由中配置

    props 对应上面的 components

    1. {
    2. path: '/Profile/:username/:userid',
    3. name: 'Profile',
    4. components: {
    5. default: () => import('../views/profile.vue'),
    6. footerName: Footer//=> import('../views/Footer.vue'))//上面的组件需要引入
    7. },
    8. props: {
    9. default: true, //也可以选择false,不展示
    10. footerName: {
    11. footerdata: "正版"
    12. }
    13. }
    14. },

    2  底部footer组件接接受参数

    1. <template>
    2. <div style="margin: 50px; line-height: 34px; width: 800px">
    3. <h2>
    4. 版权所有,翻版必究<span style="color: blue">{{ footerdata }}</span>
    5. </h2>
    6. </div>
    7. </template>
    8. <script>
    9. export default {
    10. name: "Table",
    11. props: {
    12. footerdata: {
    13. type: String,
    14. default: "绝版",
    15. },
    16. },
    17. };

     

    4.函数模式

    1. {
    2. path: '/Test/:username', //传递一个参数
    3. name: 'Test',
    4. components: {
    5. default: () => import('../views/Test.vue'),
    6. footerName: Footer
    7. },
    8. props: {
    9. default: route => {
    10. search: route.query.search //用了eslintrc这里报错
    11. },
    12. footerName: {
    13. footerdata: "正版"
    14. }
    15. }
    16. },
    1. <template>
    2. <div>
    3. <h3>test:{{ search }}</h3>
    4. </div>
    5. </template>
    6. <script>
    7. export default {
    8. props: ["search"],
    9. };

     

  • 相关阅读:
    深入理解Makefile
    工业电脑工控主机维修各种品牌型号人机界面工控屏深圳捷达工控维修
    【微服务】Hystrix的概念、作用以及使用方法
    动态规划01 背包问题(算法)
    【C语言】还搞不明白结构体吗?不妨来看看这篇文章,带你初步了解结构体
    web前端网页设计期末课程大作业:旅游网页主题网站设计——三亚旅游网页设计(6个页面) HTML+CSS+JavaScript
    OpenCV中Mat对象及其创建
    Linux内核调试工具——devmem
    【C++进阶(六)】STL大法--栈和队列深度剖析&优先级队列&适配器原理
    linux用户和权限概述
  • 原文地址:https://blog.csdn.net/jieweiwujie/article/details/126777325