首先要理解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 || ''; //路由发生变化修改页面title
next()
})
//【第三方插件】----------------------------------------------------------------
//引入饿了么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-item
v-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的项目，如何修改相对路径配置
