zoukankan      html  css  js  c++  java
  • vue路由传参params和query

    1、params传参页面

    <template>

      <button @click="params()">params传参</button>

    </template>

    <script>
        export default {
       methods: {
          params() {
            this.$router.push({
              name: 'about',
              params: {
                page: '1',
                code: '1234'
              }
            })
          }
        }
          }
    </script>
    params接收参数页面
    <script>
      export default {
        data () {
          return {
            page: '',
            code: ''
          }
        },
      created () {
          this.routerData()
        },
        methods: {
          routerData () {
            this.page = this.$route.params.page
            this.code = this.$route.params.code
            console.log('page', this.page)
            console.log('code', this.code)
          }
        }
      }
    </script>
    使用params接收的参数如果强制刷新后数据会消失,所以最好使用query进行传参

    2、query传参页面

    <template>

      <button @click="query()">query传参</button>

    </template>

    <script>
        export default {
       methods: {
          query () {
            this.$router.push({
              name: 'about',
              query: {
                page: '1',
                code: '1234'
              }
            })
          }
        }
          }
    </script>
    query接收参数页面
    <script>
      export default {
        data () {
          return {
            page: '',
            code: ''
          }
        },
      created () {
          this.routerData()
        },
        methods: {
          routerData () {
            this.page = this.$route.query.page
            this.code = this.$route.query.code
            console.log('page', this.page)
            console.log('code', this.code)
          }
        }
      }
    </script>
  • 相关阅读:
    java高级工程师(三)
    java高级工程师(二)
    python学习笔记(3)--IDLE双击运行后暂停
    Bootstrap学习笔记(9)--模态框(登录/注册弹框)
    Bootstrap学习笔记(8)--响应式导航栏
    github上搭建网站前台页面
    Bootstrap学习笔记(7)--轮播
    Bootstrap学习笔记(6)--导航居中
    Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
    Bootstrap学习笔记(4)--导航栏
  • 原文地址:https://www.cnblogs.com/lljun/p/11763591.html
Copyright © 2011-2022 走看看