vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题

时间：2019-06-21 15:29:41 阅读：1893 评论：0 收藏：0 [点我收藏+]

router.js:

export default new Router({
  routes: [

    {
      path: ‘/‘,
      redirect: ‘/main‘,
    },{
      path: ‘/main‘,
      name: ‘Main‘,
      component: ()=> import(‘@/views/Main‘),
      children: [
        {
          //path: ‘/testPage‘,  //这种方式 不配置参数名， 页面刷新会丢失参数
           path: ‘/testPage/:aaa/:bbb‘,  //这样通过 name 和 params 进行路由传参时 ， 刷新页面就不会丢失 参数aaa 和 bbb 了。
          name: ‘TestPage‘,
          component: ()=> import(‘@/views/TestPage/TestPage‘)
        },
      ]

    },

  ]
})

调整函数：

        methods: {

            //路由调整传参测试

            goRouterTest(){
                // this.$router.push(‘/testpage‘);
                this.$router.push({ name: ‘TestPage‘, params:{aaa: ‘111‘, bbb: ‘222‘} });
            }

        },

这样传参时，地址栏就会出现参数了。这样属性就不会丢失了。

技术分享图片

//然后可以选择配合路由解耦来使用

修改路由配置为：

        {
          // path: ‘/testPage‘,  //这种方式 不配置参数名， 页面刷新会丢失参数
          path: ‘/testPage/:aaa/:bbb‘,  //这样通过 name 和 params 进行路由传参时 ， 刷新页面就不会丢失 参数aaa 和 bbb 了。
          name: ‘TestPage‘,
          props: true,   //若个要解耦的 到组件中 props 中。
          component: ()=> import(‘@/views/TestPage/TestPage‘)
        },

要调整的组件生命 props

<template>
    <div class="TestPage">
        Name路由传参{{$route.params}}
    </div>
</template>

<script>
    export default {
        name: "TestPage",
        props: {
            //将路由中的参数 aaa 和 bbb 解耦的 组件上的 props 上。
            aaa: {
                type: String
            },
            bbb: {
                type: String
            }
        },

        mounted() {
            console.log(‘这是路由传的参数aaa‘, this.aaa, ‘这是路由传的参数bbb‘, this.bbb );
        }


    }
</script>

<style scoped>

</style>