vuejs路由传参问题

Question

vuejs路由传参问题

发布于
2017-01-03

怎样在路由中传参并且能让参数输出在页面（就是我能拿到参数）；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="vue.min.js">
            
        </script>
        <script src="vue-router.min.js"></script>
    </head>
    <body>
        <!--<a href="#Gif">gif</a>
        <a href="#Photo">photo</a>
        <a href="#Text">text</a>-->
        <a v-link="{path:'Gif'}">gif</a>
        <a v-link="{path:'Photo',query:{id:'123'}}">photo</a>
        <a v-link="{path:'Text'}">text</a>
    
        <router-view></router-view>
        
        <script>
        
            var App=Vue.extend({});
            var router=new VueRouter();
            router.map({
                'Gif':{
                    component:Vue.extend({template:"<h2> 我是gif</h2>"})
                },
                'Photo/:id':{
                    component:Vue.extend({template:"<h2> 我是photo</h2><p>这里输出参数</p>"})
                },
                'Text':{
                    component:Vue.extend({template:"<h2> 我是text</h2>"})
                }
                
            })
            router.redirect({
                '/':'Gif'
            })
            router.start(App,'body')
        </script>
    </body>
</html>

javascript

阅读 2.7k

1 个回答

行走在赤道

$route.query
一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

撰写回答