发新话题
打印

vue-router路由传参

vue-router路由传参

用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空。传参强烈建议适用string

params:参数不会显示到路径上

1:配置路径routes

export default new Router({

  routes: [

    {

      path: '/testVueRouter',

      name: 'TestVueRouter',

      component: TestVueRouter

    },

    {

      path: '/testVueRouterTo',

     // 一定要写name,params必须用name来识别路径

      name: 'TestVueRouterTo',

      component: TestVueRouterTo

    }

  ]

})

2:传递参数:用$router

<!-- test-vue-router页面 -->

<template>

  <div>

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

  </div>

</template>

<script>

export default {

  methods: {

    routerTo() {

      this.$router.push({

        name: `TestVueRouterTo`,

        params: {

          page: '1', code: '8989'

        }

      })

    }

  }

}

</script>

3:接受参数:用$route,少个r,注意啦

<!-- test-vue-router-to页面 -->

<template>

  <div>

  </div>

</template>

<script>

export default{

  data() {

    return {

      page: '',

      code: ''

    }

  },

  created() {

    this.getRouterData()

  },

  methods: {

    getRouterData() {

      this.page = this.$route.params.page

      this.code = this.$route.params.code

      console.log('page', this.page)

      console.log('code', this.code)

    }


  }

}

</script>


[ 本帖最后由 xiexie 于 2020-5-25 09:18 编辑 ]

TOP

发新话题