美文网首页
vue如何通过路由传值

vue如何通过路由传值

作者: 苏本的书柜 | 来源:发表于2018-11-11 11:22 被阅读6次

    1:配置路径rutes

    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>
    

    相关文章

      网友评论

          本文标题:vue如何通过路由传值

          本文链接:https://www.haomeiwen.com/subject/kbjxfqtx.html