Vant简单H5 web app【小试牛刀】

index.html

src/js/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({
     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-dev
 import promise from 'es6-promise'; //使用axios对安卓或者ios低版本兼容性处理
 promise.polyfill(); //注意需要在aixo之前注册

 //引入jquery【安装方法】cnpm i jquery --save-dev
 import $ from 'jquery';
 Vue.prototype.$ = $;

 //引入Axios【安装方法】cnpm i axios -S
 //建议暂时不要大面积使用Axios，我严重怀疑手机端它的兼容性问题！！！
 /*  import axios from 'axios';
  Vue.prototype.$axios = axios; */

 //引入Vant【安装方法】cnpm i vant -S
 import 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 -S
 import 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