前端实现路由跳转

最新推荐文章于 2024-08-18 21:06:49 发布

鹏鹏鹏鹏鹏噢

最新推荐文章于 2024-08-18 21:06:49 发布

阅读量146

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_61057374/article/details/129821500

版权

记得导入vue跟js！

话不多说直接看代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.min-2.7.0.js"></script>
    
</head>
<body>
    <div id="app">
        <!-- <span>登录</span> | <span>注册</span> -->
        <router-link to="/login">登录</router-link>
        <router-link to="/enroll">注册</router-link>
        <hr/>
        <div>
            <!-- 显示组件的地方 -->
            <router-view></router-view>
            <!-- 放内容的地方 -->
            <!-- 4、使用组件 -->
            <!-- <loginform></loginform>
            <loginform1></loginform1> -->
        </div>
    </div>
    <!-- 1、组件模板定义 -->
    <template id="logform">
        <!-- 写你想画的页面 -->
        <div>
            <h3>登录页</h3>
            <p>用户名：<input type="text"/></p>
            <p>密码：<input type="text"/></p>
        </div>
        
    </template>
    <template id="enroll">
        <div>
            <h3>注册页</h3>
            <p>用户名：<input type="text"/></p>
            <p>密码：<input type="text"/></p>
            <p>确认密码：<input type="text"/></p>
        </div>
    </template>
</body>

<script>
    //组件定义:可复用的vue实例
        //2、绑定
    const loginform = {
        template:'#logform'
    }
    const loginform1 = {
        template:'#enroll'
    }
    //创建一个路由实例，给每个组件绑定一个url，页面可以通过不同的url，去显示对应的组件
    const router = new VueRouter({
        routes:[
            {path:'/login',component:loginform},
            {path:'/enroll',component:loginform1}
        ]
    })

    new Vue({
        el:'#app',
        data:{

        },
        router,
        //3、注册
        // components:{
        //     //注册组件
        //     loginform,
        //     loginform1
        // }
    })
</script>
</html>