路由解耦-解决Vue通过name和params进行跳转页面传参刷

前言

最近在写Vue搭建的后台管理系统，在跳转页面时想要保留地址栏参数，使刷新参数还在，但是不想显示id:1,code:2的字段名id和code，怎么办呢？
通常我们在两个页面传数据时，一般会采用params，query，或者将数据用vuex，localStorage，sessionStorage，然后方便其他页面调用数据，但是params和vuex只要页面刷新，穿过来的数据就会丢失，下面请看用params传数据

方式一

{
    path: '/operate',
    component: Layout,
    redirect: '/operate/banner',
    name: 'Oprate',
    meta: { title: '系统运营', icon: 'el-icon-s-management' },
    children: [
      {
        path: 'banner',
        name: 'Banner',
        component: () => import('@/views/operate/banner'),
        meta: { title: 'Banner列表 ' },
        children: [
          {
            // path:'/detail'      // 这种方式不配置参数名， 页面刷新会丢失参数
            path: 'detail/:id',   //这样通过 name 和 params 进行路由传参时，刷新页面就不会丢失参数** id **了。
            name: 'BannerDetail',
            component: () => import('@/views/operate/banner/detail'),
            meta: { title: 'Banner详情' },
            hidden: true,
          }
        ]
      }
    ]
  },

调整函数：

// 详情页面
  methods:{
    detail(id) {
      //  this.$router.push('/BannerDetail')  
      this.$router.push({ name: "BannerDetail", params: { id: '111' } });
    },
  }

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

微信图片_20191015114008.png

方式二

除此之外，我们还可以选择配合 路由解耦 来使用
优势： 对路由参数的改变不需要通过 this.route和通过beforeRouteUpdate传值时通过$route.params获取参数改变时麻烦的写法：
只适用于 params，不适用于query；
实现方式：
在路由的配置项加一个props：true；
修改路由配置为：

children: [
          {
            //path:'/detail',     // 这种方式不配置参数名， 页面刷新会丢失参数
            path: 'detail/:id',   //这样通过 name 和 params 进行路由传参时，刷新页面就不会丢失参数** id **了。
            name: 'BannerDetail',
            component: () => import('@/views/operate/banner/detail'),
            meta: { title: 'Banner详情' },
            hidden: true
            props: true    // 将需要传的值写在组件中 props 中。
          }
        ]

要调整的组件中的props：

<script>
    export default {
        name: "BannerDetail",
        props: {
            //将路由中的参数 id 解耦在组件上的 props 上。
            id: {
                  type: String,
                  default: '',
                  required: true
              }
        },
    }
</script>
<style scoped lang='scss'>

</style>

最后的效果 （刷新不会丢失）：

微信图片_20191015142057.png
好了，今天要给大家分享的东西就这些了，有什么不明白的或者我写的哪里需要完善的请留言告诉我呦~~~

当然也可以通过 path 和 query 的方式进行传参 this.$router.push({path: 路由路径，query: {要传的产生} })
但是这不能进行 props 解耦。