vue-10 路由传参取参

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="https://vuejs.org/js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <script>
            var  Login = {
            template:`
            <div>我是登录页面
                <span> 接收到的参数是:{{msg}} </span>
            </div>
            `,
            data(){
                return {
                    msg:''
                }
            },
            created(){
                this.msg =  this.$route.query.id;
            }
        }
        var  Reg = {
            template:`
            <div>我是注册页面 <span>这是我获取到的路由参数:{{regfoo}}</span></div>
            `,
            data(){
                return {
                    regfoo:'1122'
                }
            },
            created(){
                this.regfoo =  this.$route.params.foo;
            }
        }
            Vue.use(VueRouter);

            var router  = new VueRouter({
                routes : [
                    {path:'/login',name:'login',component:Login},
                    {path:'/reg/:foo',name:'reg',component:Reg}
                ]
            })


            new Vue({
                el:"#app",
                router,
                template:`
                <div>
                    <router-link :to="{name:'login',query:{id:'123'} }">去登陆</router-link>|
                    <router-link :to="{name:'reg',params:{foo:'bar'}} ">去注册</router-link>



                    <router-view></router-view>

                </div>


                `,
                data:function(){
                    return {

                    }

                },
                methods:{
                    goreg(){
                        this.$router.push({path:'/reg'})
                    }
                }


            })
        </script>
    </body>
</html>
发表评论 / Comment

用心评论~