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

喜欢ヅ旅行 2022-05-19 23:29 255阅读 0赞

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

第一步：定义了2个路由路径，一个是系统首页另外一个是系统登录界面  
文件目录如下：  
![这里写图片描述][70]

定义如下：

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">
      
        <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文件，并进行跳转测试。  
文件目录：  
![这里写图片描述][70 1]

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

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

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

[70]: /images/20220520/84ced640265a405ab4fba40afd5cbffa.png
[70 1]: /images/20220520/7f16831873734c49ac99c939e4988350.png