首页
   /       /   
Vue路由小案例
4月
5
Vue路由小案例
作者:大彭Sir    分类: 学习笔记

Vue路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下,URL 的片段通常对应于特定的嵌套组件结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <div style="width: 10%;height:600px;border:1px solid pink;">
        <router-link to="/login">注册</router-link>
        <router-link to="/regist">登录</router-link>
        <router-link to="/grxx">个人信息</router-link>
    </div>
    <div style="width:60%;height:600px;border:1px solid blue;">
        <router-view></router-view>
    </div>
</div>
</body>
<script>
    // 创建三个组件
    const login={
        template:"<form action=\"\">\n" +
            "    用户:<input type=\"text\"><br>\n" +
            "    性别:<input type=\"radio\" name=\"sex\">男<input type=\"radio\" name=\"sex\">女<br>\n" +
            "    年龄:<input type=\"number\"><br>\n" +
            "    <button>注册</button>\n" +
            "</form>"
    }
    const regist={
        template: "<form action=\"\">\n" +
            "    用户:<input type=\"text\"><br>\n" +
            "    密码:<input type=\"password\"><br>\n" +
            "    <button>登录</button>\n" +
            "</form>"
    }
    const grxx={
        template:"<form action=\"\">\n" +
            "    姓名:<input type=\"text\"><br>\n" +
            "    性别:<input type=\"radio\" name=\"sex\">男<input type=\"radio\" name=\"sex\">女<br>\n" +
            "    年龄:<input type=\"number\"><br>\n" +
            "    <button>确定</button>\n" +
            "</form>"
    }
    const vueRouter =new VueRouter({
        mode:"history",
        routes:[
            {
                path:'/login',component:login
            },
            {
                path:'/regist',component: regist
            },
            {
                path:'/grxx',component: grxx
            }
        ]
    })
    new Vue({
        el:"#app",
        router:vueRouter
    })
</script>
<style>
    #app{
        height: 600px;
        border:1px red solid;
        display: flex;
    }
    ul li{
        margin-top: 15px;
        list-style: none;
    }
</style>
</html>

运行结果

本文标签:标签: VUE 前端
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录