vue实现四级导航及验证码的方法实例 vue实现四级导航及验证码的方

实现效果:
【vue实现四级导航及验证码的方法实例】
文章图片

首先创建五个vue界面
1.home.vue页面

#home-wrapper{nav{display: flex; a{flex: 1; background-color: antiquewhite; height: 50px; line-height: 50px; }}}

2.one.vue界面

ul{list-style: none; display: flex; width: 100%; margin-left: -40px; }li{flex: 1; background-color: orange; height: 50px; line-height: 50px; }

3.two.vue页面以及验证码实现
实现效果图:

文章图片

4. three.vue页面

5.four.vue页面

然后配置路由:

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四级导航及验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！