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

实现效果:

 首先创建五个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

总结