Vue路由小案例
Vue路由小案例
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> 运行结果
 2022-4-5
Vue学习笔记
Vue学习笔记
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
 2022-3-9
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录