vue-router v0.7.13 如何获取params值?

查看:132
本文介绍了vue-router v0.7.13 如何获取params值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

Vue.js v1.0.28 / vue-router v0.7.13
路由切换已经实现。但我想用$route.params.* ,向同一个子组件传送不同的数据,可是无法实现,请教错在哪?

<body>
    <div id="app"></div>


    <!-- 父模板 -->
    <template id="parent">
        <div class="parent">
                <router-view></router-view>
             <nav>
                 <a v-link="{ path: '/child',params: { a: 1 } }">child-1</a>
                 <a v-link="{ path: '/child',params: { a: 2 } }">child-2</a>
                 <a v-link="{ path: '/other' }">other</a>
             </nav>
        </div>
    </template>
    <script>

    child = Vue.extend({template: '<div class="round">子:{{$route.params.a}}</div>' });
    other = Vue.extend({template: '<div class="round">other</div>'});
    parent = Vue.extend({template: '#parent'})

    Vue.use(VueRouter);
    var router = new VueRouter();
    router.map({
        '/child': {component: child },
        '/other': {component: other }
    });

    router.start(parent, '#app');
    router.go({"path":"/child"} );
    </script>
</body>

解决方案

已经找到了答案:

router.map({
    '/child/:a/:b/:c': {name:'child',component: child },
    '/other': {component: other }
});

router.start(parent, '#app');
var ppp = { a: 888,b: 12222,c: 666 };
router.go({name: 'child',params: ppp } );

这篇关于vue-router v0.7.13 如何获取params值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆