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

index.html建議加入樣式

<!-- 瀏覽器頂部標(biāo)題欄圖標(biāo) -->
<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

//【基礎(chǔ)配置】----------------------------------------------------------------
//引入Vue框架（設(shè)置為false以阻止vue在啟動時(shí)生成生產(chǎn)提示）
import Vue from 'vue';
Vue.config.productionTip = false;
//導(dǎo)入路由【安裝方法】cnpm i vue-router
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';
const router = new VueRouter({// mode: 'history', // 這里存在一個(gè)弊端，如果要去掉路由的#號，后端需要配合配置，反正如果不是非得要做支付建議不用這個(gè)參數(shù)配置，參考文檔：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/', // 這個(gè)位置寫項(xiàng)目在服務(wù)器上面從根目錄開始算的絕對路徑，當(dāng)設(shè)置mode: 'history'的時(shí)候才有效scrollBehavior: (to, from, savedPosition) => {if (to.hash) return { selector: to.hash }; //跳轉(zhuǎn)到錨點(diǎn)return savedPosition || { x: 0, y: 0 }; //回歸歷史滾動位置},routes
});
router.beforeEach((to, from, next) => {document.title = to.meta.title || ''; //路由發(fā)生變化修改頁面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><!-- 導(dǎo)航條 --><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); //不是相同頁面才執(zhí)行跳轉(zhuǎn)},initElMenuData(url) {var params = {param1: "value1"};// 調(diào)用后臺接口數(shù)據(jù)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("【接口報(bào)錯(cuò)】", e);});}},beforeUpdate() {var p = this.$route.path;this.defaultActive = p == "/" ? this.items[0].path : p; //高亮顯示當(dāng)前欄目，如果是根目錄默認(rèn)顯示第一個(gè)頁面內(nèi)容page1},created() {//this.$router.push('/page1');//跳轉(zhuǎn)到首頁this.initElMenuData("./static/json/nav.json");}
};
</script>
<style scoped>
li.el-menu-item.is-active {pointer-events: none; /* 當(dāng)前欄目菜單按鈕屏蔽點(diǎn)擊 */
}
</style>

③ 在static/json/創(chuàng)建nav.json文件

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

④?在src/下創(chuàng)建routes.js

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

溫馨提示：
采用import按需加載的方式，如果出現(xiàn)import這兒報(bào)錯(cuò)，就需要安裝babel插件，vue-router官網(wǎng)有一段提示：
如果您使用的是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/下創(chuàng)建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提示跨域報(bào)錯(cuò)，【解決方法】找到config/index.js，在dev下的assetsPublicPath后面加入

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。