• 向路由组件传递数据


    1、需求:点击对应的message显示该message的详情

    2、步骤

    2.1、在src/router/index.js中配置路由时使用占位符指定需要的传参

    /*
    路由器模块
     */
    
    // 引入Vue
    import Vue from 'vue'
    
    // 引入路由器插件
    import VueRouter from 'vue-router'
    
    // 引入路由组件
    import About from '../views/About'
    import Home from '../views/Home'
    import News from '../views/News'
    import Message from '../views/Message'
    import MessageDetail from '../views/MessageDetail'
    
    // 声明使用路由器插件
    Vue.use(VueRouter)
    
    // 向外暴露路由器对象。这里为默认暴露,则引入的时候可使用任何名字
    export default new VueRouter({
      // 配置N个路由
      // path指定路由地址
      // component指定路由地址对应的路由组件
      // redirect重定向到某个路由
      routes: [
        {
          path: '/about',
          component: About
        },
        {
          path: '/home',
          component: Home,
          // children配置嵌套路由
          children: [
            {
              path: '/home/news',
              component: News
            },
            {
              path: 'message', // 等效于/home/message
              component: Message,
              children: [
                {
                  path: '/home/message/detail/:id', // 使用占位符向路由组件传递参数,参数名为id
                  component: MessageDetail
                }
              ]
            },
            {
              path: '', // 路径/home时会自动跳转到路径/home/news
              redirect: '/home/news'
            }
          ]
        },
        {
          // 访问项目根路径时重定向到/about路由
          path: '/',
          redirect: '/about'
        }
      ]
    })

    2.2、在message详情组件的父组件Message组件中为message详情组件传参

    <template>
      <div>
        <ul>
          <li v-for="item in messages" :key="item.id">
            <!--向message详情组件传参-->
            <router-link :to="`/home/message/detail/${item.id}`">{{item.title}}</router-link>
          </li>
        </ul>
        <hr>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          messages: []
        }
      },
      mounted () {
        setTimeout(() => {
          this.messages = [
            {
              id: 1,
              title: 'message01'
            },
            {
              id: 2,
              title: 'message02'
            },
            {
              id: 3,
              title: 'message03'
            }
          ]
        }, 1000)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

    2.3、在message详情组件MessageDetail中通过$route获取传参的值

    <template>
      <ul>
        <!--显示路由组件传参-->
        <p>id:{{$route.params.id}}</p>
        <li v-for="(value, key) in messageDetail" :key="key">
          {{key}} : {{value}}
        </li>
      </ul>
    </template>
    
    <script>
    export default {
      data () {
        return {
          messageDetails: [],
          messageDetail: {}
        }
      },
      mounted () {
        setTimeout(() => {
          this.messageDetails = [
            {
              id: 1,
              title: 'message01',
              content: 'content01'
            },
            {
              id: 2,
              title: 'message02',
              content: 'content02'
            },
            {
              id: 3,
              title: 'message03',
              content: 'content03'
            }
          ]
          // 数据的find方法,当detail.id === this.$route.params.id * 1成立时返回
          // this.$route.params.id * 1 时将this.$route.params.id转为Number类型
          this.messageDetail = this.messageDetails.find(detail => detail.id === this.$route.params.id * 1)
        }, 1000)
      },
      watch: {
        // 由于只有参数值发生变化时,不会重新加在路由组件
        // 因此这里通过监视$route来实现重新加在路由组件的效果
        $route: function (value) {
          this.messageDetail = this.messageDetails.find(detail => detail.id === value.params.id * 1)
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

    3、使用query参数传参相关代码

    3.1、src/router/index.js

    /*
    路由器模块
     */
    
    // 引入Vue
    import Vue from 'vue'
    
    // 引入路由器插件
    import VueRouter from 'vue-router'
    
    // 引入路由组件
    import About from '../views/About'
    import Home from '../views/Home'
    import News from '../views/News'
    import Message from '../views/Message'
    import MessageDetail from '../views/MessageDetail'
    
    // 声明使用路由器插件
    Vue.use(VueRouter)
    
    // 向外暴露路由器对象。这里为默认暴露,则引入的时候可使用任何名字
    export default new VueRouter({
      // 配置N个路由
      // path指定路由地址
      // component指定路由地址对应的路由组件
      // redirect重定向到某个路由
      routes: [
        {
          path: '/about',
          component: About
        },
        {
          path: '/home',
          component: Home,
          // children配置嵌套路由
          children: [
            {
              path: '/home/news',
              component: News
            },
            {
              path: 'message', // 等效于/home/message
              component: Message,
              children: [
                {
                  path: '/home/message/detail',
                  component: MessageDetail
                }
              ]
            },
            {
              path: '', // 路径/home时会自动跳转到路径/home/news
              redirect: '/home/news'
            }
          ]
        },
        {
          // 访问项目根路径时重定向到/about路由
          path: '/',
          redirect: '/about'
        }
      ]
    })

    3.1、Message组件

    <template>
      <div>
        <ul>
          <li v-for="item in messages" :key="item.id">
            <!--向message详情组件传参,使用query参数-->
            <router-link :to="`/home/message/detail/?id=${item.id}`">{{item.title}}</router-link>
          </li>
        </ul>
        <hr>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          messages: []
        }
      },
      mounted () {
        setTimeout(() => {
          this.messages = [
            {
              id: 1,
              title: 'message01'
            },
            {
              id: 2,
              title: 'message02'
            },
            {
              id: 3,
              title: 'message03'
            }
          ]
        }, 1000)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

    3.2、MessageDetail组件

    <template>
      <ul>
        <!--显示路由组件传参-->
        <p>id:{{$route.query.id}}</p>
        <li v-for="(value, key) in messageDetail" :key="key">
          {{key}} : {{value}}
        </li>
      </ul>
    </template>
    
    <script>
    export default {
      data () {
        return {
          messageDetails: [],
          messageDetail: {}
        }
      },
      mounted () {
        setTimeout(() => {
          this.messageDetails = [
            {
              id: 1,
              title: 'message01',
              content: 'content01'
            },
            {
              id: 2,
              title: 'message02',
              content: 'content02'
            },
            {
              id: 3,
              title: 'message03',
              content: 'content03'
            }
          ]
          // 数组的find方法,当detail.id === this.$route.query.id * 1成立时返回
          // this.$route.query.id * 1 是将this.$route.query.id转为Number类型
          this.messageDetail = this.messageDetails.find(detail => detail.id === this.$route.query.id * 1)
        }, 1000)
      },
      watch: {
        // 由于只有参数值发生变化时,不会重新加在路由组件
        // 因此这里通过监视$route来实现重新加在路由组件的效果
        $route: function (value) {
          this.messageDetail = this.messageDetails.find(detail => detail.id === value.query.id * 1)
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

    4、通过<router-view msg="aaa"></router-view>向路由组件传参

    备注:参数名只能为msg,且在路由组件中需通过props接收,比如props: ['msg']

    4.1、传参相关代码

    <router-view msg="aaa"></router-view>

    4.2、接收参数相关代码

    <template>
      <ul>
        <!--显示通过router-view传参的参数值-->
        <p>{{msg}}</p>
        <!--显示路由组件传参-->
        <p>id:{{$route.query.id}}</p>
        <li v-for="(value, key) in messageDetail" :key="key">
          {{key}} : {{value}}
        </li>
      </ul>
    </template>
    
    <script>
    export default {
      props: ['msg'], // 接收router-view传参
      data () {
        return {
          messageDetails: [],
          messageDetail: {}
        }
      },
      mounted () {
        setTimeout(() => {
          this.messageDetails = [
            {
              id: 1,
              title: 'message01',
              content: 'content01'
            },
            {
              id: 2,
              title: 'message02',
              content: 'content02'
            },
            {
              id: 3,
              title: 'message03',
              content: 'content03'
            }
          ]
          // 数组的find方法,当detail.id === this.$route.query.id * 1成立时返回
          // this.$route.query.id * 1 是将this.$route.query.id转为Number类型
          this.messageDetail = this.messageDetails.find(detail => detail.id === this.$route.query.id * 1)
        }, 1000)
      },
      watch: {
        // 由于只有参数值发生变化时,不会重新加在路由组件
        // 因此这里通过监视$route来实现重新加在路由组件的效果
        $route: function (value) {
          this.messageDetail = this.messageDetails.find(detail => detail.id === value.query.id * 1)
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
  • 相关阅读:
    书单
    x&(x1)表达式的意义
    约瑟夫环,杀人游戏(静态循环链表实现)
    我的第一个动态规划程序(试图用递归求斐波拉契数)
    NYOJ 2题 括号配对问题
    为什么 C++不叫作++C? o(∩_∩)o
    文字常量区,字符串常量
    括号匹配(栈实现)
    Mybatis的逆向工程(generator)
    Mybatis学习一(介绍/举例/优化)
  • 原文地址:https://www.cnblogs.com/liuyang-520/p/12681166.html
Copyright © 2020-2023  润新知