vue-9 路由跳转

<!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>我是登录页面</div>
            `
        }
        var  Reg = {
            template:`
            <div>我是注册页面</div>
            `
        }
            Vue.use(VueRouter);

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


            new Vue({
                el:"#app",
                router,
                template:`
                <div>
                    <router-link to="/login">去登陆</router-link>|
                    <router-link to="/reg">去注册</router-link>

                    <button @click='goreg'>点击去注册</button>

                    <router-view></router-view>

                </div>


                `,
                data:function(){
                    return {

                    }

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


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

提示:本文章评论功能已关闭