快捷導(dǎo)航

vue實現(xiàn)四級導(dǎo)航及驗證碼的方法實例

更新時間：2021年07月13日 10:35:27 作者：打小又皮又鬧

我們在做項目經(jīng)常會遇到多級導(dǎo)航這個需求,所以下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)四級導(dǎo)航及驗證碼的相關(guān)資料,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下

實現(xiàn)效果:

首先創(chuàng)建五個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>
      <!-- 編程式  導(dǎo)航/路由 -->
      <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頁面以及驗證碼實現(xiàn)

實現(xiàn)效果圖:

<template>
  <div>
    <h1>{{ name }}</h1>
    <button @click="changeCode">驗證碼</button>
    <img :src="imgCodeUrl" alt="">
  </div>
</template>
 
<script>
export default {
  // 組件的別名  在vue調(diào)試的時候方便查看
  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 的意思 創(chuàng)建 虛擬Dom/標簽 Vnode 
            // 第一個參數(shù)是 標簽名  擴展的話  自己的寫的組件   也是標簽名
            // 第二個參數(shù)是  可選的  標簽的屬性配置
            // 第三個參數(shù)是  標簽的內(nèi)容
            component: {
              render(h) {
                return h("h1", "前端")
              }
            },
          },
          {
            // /默認代表根目錄  #/levl31
            // 不帶斜杠  會自己拼接 #/one/levl32
            // 使用的時候統(tǒng)一用命名路由
            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")
      },
      {
        // 可選參數(shù)  \d  數(shù)字  字符串就匹配不上
        path: "four/:id(\\d*)?",
        name: 'Four',
        component: () => import("@/views/day/four.vue")
      },
    ]
  }
]
 
const router = new VueRouter({
  routes
})
 
export default router