Muse-ui 的底部导航栏传递参数

1 问题说明

muse-ui 有一个组件叫 BottomNav 可以用 to 属性来设置跳转的路径，但如果需要传递参数呢

2 解决方法

官网中其实有关于这个组件的说明

• 从说明中可以看出来 to 属性是支持传递 Object 对象的
• 并且从说明中可以看出，to 的值会被传到 router.push() 中

• 我们知道使用router.push 跳转并传递参数时是通过如下方式

  $router.push({
  	name: 'xx',
  	params: {
  		'aaa': bbb
  	}	
  })
  

• 其中 name 和 params 组合起来就是一个对象，因此我们将待跳转的页面名称和参数封装到一个对象中放到 to 属性中即可

<mu-bottom-nav-item
          value="main"
          title="主页"
          icon=":iconfont icon-home"
          :to="mainObj"
        >
mu-bottom-nav-item>
    
<script>
    export default{
      data(){
        return{
          mainObj: {
            name: "Main"
            params: {
               userId: this.$route.params.userId
            }
          },
        }
      }
    }
script>