本專案為大家分享了Vue+Router+Element實現簡易導航欄的具體程式碼，供大家參考，具體內容如下

專案結構：

直接上程式碼：主要就是引入配置路由Router

①：引入Router（路由管理器）

//config. 頁面
 
//導航欄
import Home from '../components/home'
//首頁
import Index from '../components/index'
//視訊平臺
import Vid from '../components/vid_terrace'
//其他頁面
import Rests from '../components/rests'
 
 
export default {
  routes:[
    {
      path:'/home',name: 'home',component: Home,},{
      /**
       *  home 配置的就是導航欄，這個必須配置不然就會跳轉到新的頁面
       *  /home/index
       */
 
      path: '/home',redirect: 'index',children:  [
        {
          name: 'index',path: '/index',component: Index
        },{
          name: 'vid',path
 
: '/vid',www.cppcns.com       component: Vid
        },{
          name:'rests',path: '/rests',component: Rests
        }
      ]
    }
  ],// 去掉地址的#
  mode:'history'
}

//index.js 頁面

import VueRouter from "vue-router";
import Vue from "vue";
import Config from './config';
 
Vue.use(VueRouter);
 
let router = new VueRouter(Config);
export default router;

//main.js頁面

import Vue from 'vue';
import App from './App';
 
 
// 引入Element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.';
 
//引入./router/index檔案
import router from "./router/index";
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
 
  el: '#app',render: h => h(App),router
})

//app.vue 頁面

<template>
  <div id="app">
    <!-- 元件是一個 functional 元件，渲染路徑匹配到的檢視元件。-->
      <router-view></router-view>
  </div>
 
</template>
 
<script>
 
export default {
  name: 'App',compobADgVnents: {
   
  }
}
</script>
 
<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

//home.vue 頁面

<template>
<!--  導航欄-->
  <div>
    <el-menu
        :default-active="this.$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
 
      <el-menu-item v-for="(tit,i) in titleList" :key="i" :index="tit.name">
        <template>{{ tit.navItem }}</template>
      </el-menu-item>
 
    </el-menu>
 
    <el-main class="detailed-content">
      <router-view />
    </el-main>
  </div>
</template>
 
<script>
export default {
 
    data() {
      return {
        activeIndex: '1',activeIndex2: '1',titleList:[
          {name:'index',navItem:'首頁'},{name:'vid',navItem:'視訊平臺'},{name:'rests',navItem:'其他'},]
 
      }
    },methods: {
      handleSelect(key,keyPath) {
        console.log(key,keyPath);
      }
    }
  }
</script>
 
<style scoped>
 
</style>

效果圖：

乍一看可能有點繁瑣，因為Router的配置有點亂，其實導航欄的程式碼沒幾行，如果你的環境已經搭好那就只需要看下home.vue和config.js檔案就好。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。