index.html

src/js/main.js

 //【基础配置】----------------------------------------------------------------//引入Vue框架（设置为false以阻止vue在启动时生成生产提示）import Vue from 'vue';Vue.config.productionTip = false;//导入路由【安装方法】cnpm i vue-routerimport VueRouter from 'vue-router';Vue.use(VueRouter);import routes from './routes';const router = new VueRouter({scrollBehavior: (to, from, savedPosition) => {return { x: 0, y: to.meta.scrollTop || 0 }; //进入该页面时，用之前保存的滚动位置赋值 },routes});router.isDirectAccess = false; //是否直接访问（通常是通过超链接访问）router.goBack = () => {if (router.isDirectAccess) {router.push('/'); //如果直接访问，返回都直接跳转到根目录} else {router.isToRight = true; //页面从左往右滑动history.back(); //后退+刷新（为了某些页面重新登录的时候自动回到最顶端）//  history.go(-1); //后退}};router.beforeEach((to, from, next) => {router.isDirectAccess = from.name === null || from.path === to.path || from.path === "/"; //是否直接访问（譬如通过网址直接访问）from && (from.meta.scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop); //进入该页面时，记录上一个路由页面的滚动位置router.title = document.title = to.meta.title || ''; //路由发生变化修改页面title//判断跳转到一级页面if (to && to.meta && to.meta.tabbarIndex !== null && to.meta.tabbarIndex !== undefined) {if (from && from.meta && from.meta.tabbarIndex !== null && from.meta.tabbarIndex !== undefined) { //在一级页面之间切换router.isFade = true; //淡入淡出//router.isToRight = to.meta.tabbarIndex < from.meta.tabbarIndex;//判断在一级页面的时候，点击底部菜单左右移动方向，这里的tabbarIndex是在meta里定义的索引，用于判断菜单顺序} else { //从内页 → 一级页面router.isToRight = true;}}if (router.isFade) {router.transitionName = 'fade'} else {router.transitionName = router.isToRight ?"slide-right" :"slide-left"; //朝右滑动→、←朝左滑动}router.isFade = false; //重置淡入淡出router.isToRight = false; //重置朝左的方向next();});//【第三方插件】----------------------------------------------------------------//引入es6-promise【安装方法】cnpm i es6-promise --save-devimport promise from 'es6-promise'; //使用axios对安卓或者ios低版本兼容性处理promise.polyfill(); //注意需要在aixo之前注册//引入jquery【安装方法】cnpm i jquery --save-devimport $ from 'jquery';Vue.prototype.$ = $;//引入Axios【安装方法】cnpm i axios -S//建议暂时不要大面积使用Axios，我严重怀疑手机端它的兼容性问题！！！/*  import axios from 'axios';Vue.prototype.$axios = axios; *///引入Vant【安装方法】cnpm i vant -Simport Vant from 'vant';import 'vant/lib/index.css';import 'vant/lib/icon/local.css'; //解决离线无网络环境中使用icon不显示的问题Vue.use(Vant);//  引入Vant 图片懒加载模块import { Lazyload } from 'vant';Vue.use(Lazyload);//引入Echarts【安装方法】cnpm i echarts -Simport echarts from 'echarts';Vue.prototype.$echarts = echarts;//【公共方法】----------------------------------------------------------------import sg from "./sg";Vue.prototype.$g = sg;import sd from './sd';Vue.prototype.$d = sd;//【公共变量】----------------------------------------------------------------import global from "./global";Vue.prototype.$global = global;//【初始化加载】----------------------------------------------------------------import App from '../vue/App';new Vue({ el: '#app', render: h => h(App), router });

src/vue/App.vue

src/js/routes.js

export default [{path: "/",redirect: "/home",},{path: "/home",meta: { title: '空中招聘', index: 0 },component: () =>import ('../vue/page/home'),},{path: "/xxtz",meta: { title: '消息通知' },component: () =>import ('../vue/page/home/xxtz'),},{path: "/sp",meta: { title: '视频面试' },component: () =>import ('../vue/page/home/xxtz/sp'),},{path: "/detail",meta: { title: '消息' },component: () =>import ('../vue/page/home/xxtz/detail'),},{path: "/tzgg",meta: { title: '通知公告' },component: () =>import ('../vue/page/home/tzgg'),},{path: "/xjh",meta: { title: '宣讲会' },component: () =>import ('../vue/page/home/xjh'),},{path: "/by",meta: { title: '毕业', index: 1 },component: () =>import ('../vue/page/by'),},{path: "/jy",meta: { title: '就业', index: 2 },component: () =>import ('../vue/page/jy'),},{path: "/wd",meta: { title: '我的', index: 3 },component: () =>import ('../vue/page/wd'),},{path: "/search/*",meta: { title: '搜索结果' },component: () =>import ('../vue/page/search'),}, {path: "*",meta: { title: '没有找到您想要的页面' },component: () =>import ('../vue/page/notFound')} //404页面，一定要写在最后
];

src/vue/page/home.vue、src/vue/page/home/tzgg.vue和src/vue/page/home/xjh.vue