vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
类别:编程学习 浏览量:1512
时间:2021-10-06 01:24:47 vue查询条件生成工具
vue实现四级导航及验证码的方法实例实现效果:
首先创建五个vue界面
1.home.vue页面
<template> <li id="home-wrapper"> <h1>{{ name }}</h1> <nav> <!-- 二级路由的出口 在一级路由的界面里面 --> <router-link to="/one">one</router-link> <router-link :to="{ name: 'Two' }">two</router-link> <router-link :to="threeObj">three</router-link> <!-- 编程式 导航/路由 --> <button @click="fourBtn">four</button> </nav> <router-view></router-view> </li> </template> <script> export default { data() { return { name: "首页", threeObj: { name: "Three", }, }; }, methods: { fourBtn() { var userId = 6789; this.$router.push({ path: `four/${userId}`, }); }, }, }; </script> <style lang="less" scoped> #home-wrapper{ nav{ display: flex; a{ flex: 1; background-color: antiquewhite; height: 50px; line-height: 50px; } } } </style>
2.one.vue界面
<template> <li> <h1>{{name}}</h1> <ul> <li> <router-link to="/levl31">web</router-link> </li> <li> <router-link :to="{name:'name32'}">后端</router-link> </li> <li> <!-- 使用命名路由 在多级路由里面 比较方便 --> <router-link :to="{name:'name33'}">AI</router-link> </li> <li> <router-link to="/one/levl34">UI</router-link> </li> <li> <router-link :to="{name:'name35'}">三级路由-4</router-link> </li> </ul> <!-- 三级路由 出门在二级路由的界面 --> <router-view></router-view> </li> </template> <script> export default { name:'One', data() { return { name: "第一页" } }, } </script> <style lang="less" scoped> ul{ list-style: none; display: flex; width: 100%; margin-left: -40px; } li{ flex: 1; background-color: orange; height: 50px; line-height: 50px; } </style>
3.two.vue页面以及验证码实现
实现效果图:
<template> <li> <h1>{{ name }}</h1> <button @click="changeCode">验证码</button> <img :src="imgCodeUrl" alt=""> </li> </template> <script> export default { // 组件的别名 在vue调试的时候方便查看 name: "Two_zh", data() { return { name: "第二页", imgCodeUrl:"" }; }, methods: { // 获取验证码 changeCode() { // /api 是在vue.config.js 里面代理配置 const url = "api/v1/captchas"; // const url = "https://elm.cangdu.org/v1/captchas"; this.axios .post(url, {}) .then((res) => { this.imgCodeUrl =res.data.code console.log("验证码接口:",res); }) .catch((e) => { console.log("错误:", e); }); }, }, }; </script> <style lang="less" scoped> </style>
4. three.vue页面
<template> <li> <h1>{{name}}</h1> </li> </template> <script> export default { name:'three', data() { return { name: "第三页" } }, } </script> <style lang="less" scoped> </style>
5.four.vue页面
<template> <li> <h1>{{name}}</h1> </li> </template> <script> export default { name:'Four', data() { return { name: "第四页" } }, created() { console.log("第四页 created:",this.$route) }, } </script> <style lang="less" scoped> </style>
然后配置路由:
import Vue from 'vue' import VueRouter from 'vue-router' import Home2 from '@/views/day/home.vue' Vue.use(VueRouter) const routes = [ { path: "/", name: 'home2', component: Home2, redirect: "/one", children: [ { path: "/one", name: 'One', component: () => import("@/views/day/one.vue"), children: [ { path: '/levl31', // h creacteElemet 的意思 创建 虚拟Dom/标签 Vnode // 第一个参数是 标签名 扩展的话 自己的写的组件 也是标签名 // 第二个参数是 可选的 标签的属性配置 // 第三个参数是 标签的内容 component: { render(h) { return h("h1", "前端") } }, }, { // /默认代表根目录 #/levl31 // 不带斜杠 会自己拼接 #/one/levl32 // 使用的时候统一用命名路由 path: "levl32", name: "name32", component: { render(h) { return h("h1", "后端") } }, }, { path:"/one?levl33", name:"name33", component:{ render(h) { return h("h1", "人工智能") } } }, { path:"/one/levl34", name:"name34", component:{ render(h) { return h("h1","就是个美工吗") } } }, // 三 四级路由 { path:"level35", name:"name35", component:()=>import("@/views/Home.vue"), // 四级路由 children:[ { path:"boy", name:"Boy", component:()=>import("@/views/boy.vue") }, { path:"girl", name:"Girl", component:()=>import("@/views/girl.vue") } ] } ] }, { path: "/two", name: 'Two', component: () => import("@/views/day/two.vue") }, { path: "/three", name: 'Three', component: () => import("@/views/day/three.vue") }, { // 可选参数 \d 数字 字符串就匹配不上 path: "four/:id(\\d*)?", name: 'Four', component: () => import("@/views/day/four.vue") }, ] } ] const router = new VueRouter({ routes }) export default router
总结
到此这篇关于vue实现四级导航及验证码的文章就介绍到这了,更多相关vue四级导航及验证码内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue身份验证(详解vue身份认证管理和租户管理)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- vue基础语法对象(浅析从面向对象思维理解Vue组件)
- vue左右滑动切换(vue实现界面滑动效果)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vue验证码(vue_drf实现短信验证码)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- 《囧妈》为何受抵制 春节七部影片撤档背后的责任与博弈(囧妈为何受抵制)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
- 省 市书法家协会 送万福进万家 活动走进禹州美丽乡村(省市书法家协会)
- 点赞 禹州苌庄正式撤乡建镇 未来发展不可估量(禹州苌庄正式撤乡建镇)
- 它荣获 中国生态魅力镇 称号 就在咱们禹州,一起来看看(中国生态魅力镇)
- 真牛 禹州将建成中等城市(禹州将建成中等城市)
热门推荐
- oracle中decode函数
- idea怎么在tomcat部署项目(IDEA 配置Tomcat服务器和发布web项目的图文教程)
- sql server代理无法启动服务(SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法)
- 腾讯云服务器安装方法(在腾讯云服务器上部署网站镜像的详细教程)
- js轮播图片(JS实现简单图片轮播效果)
- webpack常用的配置(webpack-dev-server搭建本地服务器的实现)
- 怎么把csv文件导入mysql(mysql导入csv的4种报错的解决方法)
- css中最常用的选择符(CSS 类选择符和ID选择符的区别)
- 常用的几种jsp开发环境搭建(怎么一键安装Jsp网站程序?Jsp环境一键配置软件JspStudy推荐)
- python模块都是自己的语法(详解Python_shutil模块)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9