Vue绑定和路由

逃离我推掉我的手 2023-10-11 20:12 45阅读 0赞

第一种方式

![e33844139abb49298ddc52f21d8747c5.png][]

注册模板方式

![2c21da56175f4862b12b1a61a837a5ae.png][]

模板内容

![66758602f8474a82bee23419bd14a884.png][]

将模板加入页面

![8ddc912b3336440793489c0d9270e807.png][]

源代码

<!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.min-v2.5.16.js"></script>
        <script src="../js/vue-router.min-2.7.0.js"></script>
    </head>
    
    <body>
        <div id="app">
            
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
    
            <hr />
            <router-view></router-view>
            
        </div>
        <template id="login">
            <div>
                <h2>登录页</h2>
                <p>账号:<input type="text"></p>
                <p>密码:<input type="password"></p>
            </div>
        </template>
        <template id="register">
            <div>
                <h2>注册页</h2>
                <p>账号:<input type="text`"></p>
                <p>密码:<input type="password`"></p>
                <p>确认密码:<input type="password`"></p>
            </div>
        </template>
    </body>
    <script>
    
        //第一种方式
        //let first=Vue.extend({
        //   template:'#login'
        //});
    
        //第一种简化版
        let first = {
            template: '#login'
        }
    
        //从第一种方式,第一种注册方式
        //Vue.component('first',first);
    
        //第二种方式
        Vue.component("second", {
            template: '#login'
        });
        // Vue.component("register",{
        //     template:'#register'
        // });
        let register = {
            template: '#register'
        }
        let router = new VueRouter({
            routes: [
                { path: '/login', component: first },
                { path: '/register', component: register }
    
            ]
    
        })
        new Vue({
            el: '#app',
            data: {},
            router
            //第一种方式,第二种注册方式
            //  components:{
            //      first
            //  }
        });
    </script>
    
    </html>

[e33844139abb49298ddc52f21d8747c5.png]: https://img-blog.csdnimg.cn/e33844139abb49298ddc52f21d8747c5.png
[2c21da56175f4862b12b1a61a837a5ae.png]: https://img-blog.csdnimg.cn/2c21da56175f4862b12b1a61a837a5ae.png
[66758602f8474a82bee23419bd14a884.png]: https://img-blog.csdnimg.cn/66758602f8474a82bee23419bd14a884.png
[8ddc912b3336440793489c0d9270e807.png]: https://img-blog.csdnimg.cn/8ddc912b3336440793489c0d9270e807.png