实现效果:

 首先创建五个vue界面

1.home.vue页面

<template> <div 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> </div></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> <div> <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> </div></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> <div> <h1>{{ name }}</h1> <button @click=”changeCode”>验证码</button> <img :src=”imgCodeUrl” alt=””> </div></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> <div> <h1>{{name}}</h1> </div></template> <script> export default { name:’three’, data() { return { name: “第三页” } }, }</script> <style lang=”less” scoped> </style>

5.four.vue页面

<template> <div> <h1>{{name}}</h1> </div></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实现获取验证码

&lt

Vue实战项目之获取手机短信验证码

1，先判断手机号和验证是否为空， 2，点击发送验证码，1分钟计时，得到验证码 3，输入的验证码是否为空和是否正确， 4，最后向服务发送请求 初始界面如下： 获取验证码时进行倒计时效果如下：

vue路由导航的解析流程

1.导航被触发
2.在失活的组件里调用beforeRouteLeave守卫
3.调用全局beforeEach守卫
4.在重用的组件里调用beforeRouteUpdate守卫
5.在路由配置里调用beforeEnter
6.解析异步路由组件
7.在被激活的组件里调用beforeRouteEnter
8.调用全局吧的beforeResolve守卫
9.导航被确认
10.调用全局的afterEach钩子 1
1.触发DOM更新 1
2.调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入