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

1 问题说明

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

2 解决方法

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

在这里插入图片描述

  • 从说明中可以看出来 to 属性是支持传递 Object 对象的
  • 并且从说明中可以看出,to 的值会被传到 router.push()
  • 我们知道使用router.push 跳转并传递参数时是通过如下方式

    $router.push({
    	name: 'xx',
    	params: {
    		'aaa': bbb
    	}	
    })
    
  • 其中 nameparams 组合起来就是一个对象,因此我们将待跳转的页面名称和参数封装到一个对象中放到 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>

你可能感兴趣的:(前端,javascript,vue)