项目采用的是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。