首先要理解Vue項目加載順序：
index.html?→?main.js?→ App.vue →?nav.json→?routes.js → page1.vue

index.html建議加入樣式

<!-- 瀏覽器頂部標題欄圖標 -->
<link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico"><style>
html,body{margin: 0;padding: 0;  overflow-x: hidden;
}
</style>

① main.js

//【基礎配置】----------------------------------------------------------------
//引入Vue框架（設置為false以阻止vue在啟動時生成生產提示）
import Vue from 'vue';
Vue.config.productionTip = false;
//導入路由【安裝方法】cnpm i vue-router
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';
const router = new VueRouter({// mode: 'history', // 這里存在一個弊端，如果要去掉路由的#號，后端需要配合配置，反正如果不是非得要做支付建議不用這個參數配置，參考文檔：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90// base: '/projects/rs/', // 這個位置寫項目在服務器上面從根目錄開始算的絕對路徑，當設置mode: 'history'的時候才有效scrollBehavior: (to, from, savedPosition) => {if (to.hash) return { selector: to.hash }; //跳轉到錨點return savedPosition || { x: 0, y: 0 }; //回歸歷史滾動位置},routes
});
router.beforeEach((to, from, next) => {document.title = to.meta.title || ''; //路由發生變化修改頁面titlenext()
})//【第三方插件】----------------------------------------------------------------
//引入餓了么UI框架【安裝方法】cnpm i element-ui -S
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//引入es6-promise 安裝cnpm i es6-promise --save-dev
import promise from 'es6-promise'; //使用axios對安卓或者ios低版本兼容性處理
promise.polyfill(); //注意需要在aixo之前注冊//引入Axios【安裝方法】cnpm i axios -S
import axios from 'axios';
Vue.prototype.$axios = axios;//引入Echarts【安裝方法】cnpm i echarts -S
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;//【公共方法】----------------------------------------------------------------
import sg from "./js/sg";
Vue.prototype.$g= sg;//【公共變量】----------------------------------------------------------------
import global from "./js/global";
Vue.prototype.$global = global;//【初始化加載】----------------------------------------------------------------
import App from './App';
new Vue({ el: '#app', render: h => h(App), router });

② app.vue

<template><div><!-- 導航條 --><el-menu mode="horizontal" :default-active="defaultActive" @select="selectElMenu"><el-menu-itemv-for="(item,$index) in items":index="item.path":key="$index"v-html="item.label"></el-menu-item></el-menu><!-- 渲染路由映射組件 --><router-view /></div>
</template><script>
export default {data() {return {defaultActive: "",items: []};},methods: {selectElMenu(key, keyPath) {this.defaultActive != key && this.$router.push(key); //不是相同頁面才執行跳轉},initElMenuData(url) {var params = {param1: "value1"};// 調用后臺接口數據this.$axios.get(url, {params: params}).then(r => {r = r.data;if (r.status == "SUCCESS") {r = r.data;if (r) {//這里寫代碼this.items = r;this.defaultActive = r[0].path; //初始化高亮顯示欄目}} else {alert(r.message);}}).catch(e => {console.log("【接口報錯】", e);});}},beforeUpdate() {var p = this.$route.path;this.defaultActive = p == "/" ? this.items[0].path : p; //高亮顯示當前欄目，如果是根目錄默認顯示第一個頁面內容page1},created() {//this.$router.push('/page1');//跳轉到首頁this.initElMenuData("./static/json/nav.json");}
};
</script>
<style scoped>
li.el-menu-item.is-active {pointer-events: none; /* 當前欄目菜單按鈕屏蔽點擊 */
}
</style>

③ 在static/json/創建nav.json文件

{"status":"SUCCESS","message":"加載失敗","data":[{"label":"<b>首頁</b>","path":"/page1"},{"label":"欄目2","path":"/page2"},{"label":"欄目3","path":"/page3"},{"label":"欄目4","path":"/page4"}]
}

④?在src/下創建routes.js

export default [{ path: "/", redirect: "/page1" },// 當設置了mode: 'history'的時候，這個地方最好是不要用redirect，注釋掉該路由，在App.vue加入created(){this.$router.push('/home');}， 否則會導致build之后刷新找不到頁面{path: "/page1",meta: { title: '首頁瀏覽器標題' },component: () =>import ('./vue/page1'), //在有嵌套路由的頁面的template根節點加入<router-view></router-view>用于顯示二級路由頁面內容//嵌套路由（二級頁面），注意！path不要在開頭加"/",否則會認為是根路徑導致報錯children: [{path: "page2",meta: { title: 'page2瀏覽器標題' },component: () =>import ('./vue/page2')},{path: "page3",meta: { title: 'page3瀏覽器標題' },component: () =>import ('./vue/page3')},{path: "page4",meta: { title: 'page4瀏覽器標題' },meta: {title: 'page2瀏覽器標題'},component: () =>import ('./vue/page4')}]},{path: "/page2",meta: { title: 'page2瀏覽器標題' },component: () =>import ('./vue/page2')},{path: "/page3",meta: { title: 'page3瀏覽器標題' },component: () =>import ('./vue/page3')},{path: "/page4",meta: { title: 'page4瀏覽器標題' },component: () =>import ('./vue/page4')},{path: "*",meta: { title: '該頁面無法顯示！' },component: () =>import ('./vue/notFound')} //404頁面，一定要寫在最后
];

溫馨提示：
采用import按需加載的方式，如果出現import這兒報錯，就需要安裝babel插件，vue-router官網有一段提示：
如果您使用的是Babel，您將需要添加syntax-dynamic-import插件才能使Babel可以正確地解析語法。
【安裝方法】cnpm i babel-plugin-syntax-dynamic-import -D
然后在webpack的js的loader部分修改為：
{
? ? test:/\.js$/,
? ? loader:'babel-loader',
? ? options:{
? ? ? ? plugins:['syntax-dynamic-import']
? ? }
}

在src/vue/下創建page1.vue

<template><div><el-row style="margin-top:20px"><el-button @click="$router.push('/page1/page2')">/page1/page2</el-button><el-button @click="$router.push('/page1/page3')">/page1/page3</el-button><el-button @click="$router.push('/page1/page4')">/page1/page4</el-button></el-row><router-view /></div>
</template>

----------------------------------------------------------------
如果使用axios提示跨域報錯，【解決方法】找到config/index.js，在dev下的assetsPublicPath后面加入

proxyTable: {'/api': {target: 'http://127.0.0.1:8080', // 后臺訪問地址changeOrigin: true,pathRewrite: {'^/api': ''}}
},

?【擴展閱讀】
生成項目→npm run build Vue的項目，如何修改相對路徑配置

總結

以上是生活随笔為你收集整理的【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。