当前位置：首页 > article >正文

《代码实例》Vue组件与路由

article 2025/1/11 21:06:33

案例一.html

<!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="/register">注册</router-link>
        <hr/>
        <div>
            <!-- 显示组件地方 -->
            <router-view></router-view>
            <!-- 放内容的地方 -->
            <!-- 使用组件 -->
            <!-- <loginform></loginform>           
            <resgisterform></resgisterform>        -->
        </div>
       
    </div>

    <!-- 组件模板定义 -->
    <template id="loginform">
        <!-- 写你想画的页面 -->
        <div>
            <h3>登录页</h3>
            <p>用户名：<input type="text"></p>
            <p>密码：<input type="text"></p>
            <p>{{num}}</p>
        </div>          
    </template>
    <template id="resgisterform">
        <!-- 写你想画的页面 -->
        <div>
            <h3>注册页</h3>
            <p>用户名：<input type="text"></p>
            <p>密码：<input type="text"></p>
            <p>确认密码：<input type="text"></p>
        </div>          
    </template>
</body>
<script>
    //组件定义：可复用的vue实例
    const loginform={
        template:'#loginform',
        data(){
            return{
                num:3
            }
        },
        methods:{
            
        }
        
    }

    const resgisterform={
        template:'#resgisterform'
    }

    //创建一个路由实例，给每个组件绑定一个url,页面可以通过不同url去显示对应组件
    //http://localhost://login
    //http://localhost://register
    const router=new VueRouter({
        routes:[
            {path:'/login',component:loginform},
            {path:'/register',component:resgisterform}

        ]
    });

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

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

案例二.html

<!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">
       <count></count>
       <count></count>
    </div>



    <!-- 组件模板定义 -->
    <template id="count">
        <button @click="addnum">点击了{{num}}次</button>       
    </template>
    
</body>
<script>
    
    //编写子组件步骤
    // 1.定义子组件模板
   //  2.声明组件绑定他
   //  3.在父亲组件注册


   //全局注册
    // Vue.component('count1',{
    //     template:'#count',
    //     data(){
    //         return{
    //             num:0
    //         }
    //     }
    // })

   //局部注册
    const count={
        template:'#count',
        data(){
            return{
                num:0
            }
        },
        methods:{
            addnum(){
                this.num++
            }
        }
    }
   

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

        },
        methods:{
            
        },
        components:{
            count
        }
       
        // components:{
        //     //注册组件
        //     loginform,
        //     resgisterform
        // }
    })
</script>
</html>

案例三

<!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>
        <img src="../image/top.png">
    </div>
    <div id="app">
        <!-- <span>登录</span> <span>注册</span> -->
        <router-link to="/login" tag="button">新闻</router-link><br>
        <router-link to="/register">国际</router-link><br>
        <router-link to="/js">军事</router-link>
        
        <div>
            <!-- 显示组件地方 -->
            <router-view></router-view>
            <!-- 放内容的地方 -->
            <!-- 使用组件 -->
            <!-- <loginform></loginform>           
            <resgisterform></resgisterform>        -->
        </div>
       
    </div>

    <!-- 组件模板定义 -->
    <template id="loginform">
        <!-- 写你想画的页面 -->
        <div>
           <img src="../image/new.png">
        </div>          
    </template>
    <template id="resgisterform">
        <!-- 写你想画的页面 -->
        <div>
           <img src="../image/gj.png">
        </div>          
    </template>
    <template id="jsform">
        <!-- 写你想画的页面 -->
        <div>
           <img src="../image/js.png">
        </div>          
    </template>
</body>
<script>
    //1.定义组件模板
    // 2.声明路由实例，绑定模板





    //组件定义：可复用的vue实例
    const loginform={
        template:'#loginform',
        data(){
            return{
                num:3
            }
        },
        methods:{
            
        }
        
    }

    const resgisterform={
        template:'#resgisterform'
    }

    const jsform={
        template:'#jsform'
    }

    //创建一个路由实例，给每个组件绑定一个url,页面可以通过不同url去显示对应组件
    //http://localhost://login
    //http://localhost://register
    const router=new VueRouter({
        routes:[
            //{path:'/',redirect:'login'},//默认路由
            //{path:'/',component:loginform},//通过名字设置默认路由
            {path:'/login', name:'aaa', component:loginform},
            {path:'/register',component:resgisterform},
            {path:'/js',component:jsform}

        ]
    });

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

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