Vue2+VueRouter3+Webpack3.6+Axios项目实战----vueRouter3整合进项目（四）

项目采用的是VueRouter3.0.1作为路由。下面对vueRouter的配置进行一个详细的记录

第一步：定义了2个路由路径，一个是系统首页另外一个是系统登录界面
文件目录如下：

定义如下：

import Vue from 'vue';
import VueRoter from 'vue-router';

//登陆界面
const Login = r => require.ensure([], () => r(require('../pages/login')), 'system');
//首页界面
const HomePage = r => require.ensure([], () => r(require('../pages/homePage/HomePage.vue')), 'system');

Vue.use(VueRoter);

//登录界面 以及首页几个基础界面的路由配置
let  routes = [
  { path: '/',name:"login",component: Login },
  { path: '/Login',name:"loginUrl",component: Login },
  { path: '/HomePage',name:"homePage",component: HomePage },
]

routes=[
  ...routes
];


export default routes;

第二步：将路由配置到入口main.js中，目的是将router集成进来，并且注册了路由跳转前事件和路由跳转后事件，事件中主要是对loading状态进行干预，目的就在于界面跳转的过程中出现loading提醒。

import VueRouter from 'vue-router'
import routes from './router'
import { sync } from 'vuex-router-sync'

//初始化路由
const router = new VueRouter({routes})
let store = new Vuex.Store(initStore);
//同步路由和store的状态 这样可以从store中直接获取 path: '',query: null, params: null 的属性
sync(store, router);


//如果开始跳转
router.beforeEach(function (to, from, next) {
  console.log("-----------beforeEach-------------");
  //显示loading提醒
  store.commit('updateLoadingStatus', {isLoading: true});
  if (/\/http/.test(to.path)) {
    let url = to.path.split('http')[1];
    window.location.href = `http${url}`
  } else {
    next()
  }
})
//路由跳转结束
router.afterEach(function (to) {
  console.log("-----------afterEach-------------");
  //界面跳转完成后 关闭提醒框
  store.commit('updateLoadingStatus', {isLoading: false});
})

//初始化入口vue对象
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

第三步： 修改App.vue 添加路由视图区域。

<template>
  <div style="height:100%;overflow: hidden">
  <!--loading提醒组件 本人自己封装的组件-->
    <goLoading v-model="isLoading"></goLoading>
    <!--路由区域-->
    <router-view class="router-view"></router-view>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    methods: {},
    mounted() {


    },
    computed: {
      ...mapState({
        route: state => state.route,
        path: state => state.route.path,
        isLoading: state => state.vux.isLoading
      })
    },
    components: {

    },
  }
</script>

第四步：添加login.vue和HomePage.vue文件，并进行跳转测试。
文件目录：

在登录界面和首页进行了简单的编写，然后在浏览器中输入

http://localhost:8080/Login
和
http://localhost:8080/HomePage

如果展示出了不同的内容，则表示路由配置已经ok。