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 修改后刷新(Vue使用三种方法刷新页面)
- vuetable表格合并(vue-table实现添加和删除)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- vue 底层原理(浅谈Vue插槽实现原理)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- vue编程加入购物车(vuex实现简单的购物车功能)
- vue一个组件两种样式(Vue实现动态样式的多种方法汇总)
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- vue在html里面怎么展示图片(v-html渲染组件问题)
- vuefor指令使用教程(Vue必学知识点之forEach的使用)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
- 医事文化谈屑 | 古人的名 字 号(医事文化谈屑古人的名)
- ()
- 网友很惭愧,自己写了很多年的字,到头来还不如一名小学生写的好(自己写了很多年的字)
热门推荐
- python学生管理系统的思路(python实现学员管理系统)
- keydown、keypress、keyup的使用
- dockerfile镜像介绍(使用Dockerfile构建docker镜像)
- mysql创建数据库教程(MySQL创建数据库并支持中文字符的操作方法)
- php环境搭建windows系统(Windows环境下安装PHP Pear的方法图文教程)
- vue加载html5动画(vue实现旋转木马动画)
- socket和tcp什么关系(TCP socket SYN队列和Accept队列区别原理解析)
- sql server入门教程(SQL Server AlwaysOn读写分离配置图文教程)
- 虚拟主机已被禁用(虚拟主机提示网站被暂停了是怎么回事?)
- MySql 中IFNULL、ISNULL和NULLIF