vue路由的那些事

在这里插入代码片### vue路由的那些事

基本的步骤说明

a)注册路由

export const MineHome = {
    path: '/MineIndex',
    name: 'MineIndex',
    component: MineIndex
    }

b)异步引用页面，进行代码分割和懒加载

<template>
    <div id="app">
        <keep-alive>
            <!--缓存视图组件-->
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

<template>
    <div id="MineIndex">
        <router-view/>
    </div>
</template>
<script>
    export default {
        name: 'index'
    }
</script>

//Mine首页  router文件夹

const MineIndex = () => import('@/views/MineIndex')//懒加载
const Mine = () => import('@/views/Mine')//懒加载
export const MineHome = {
    path: '/MineIndex',
    name: 'MineIndex',
    component: MineIndex
    redirect: {
        name: 'Mine'
    },//路由重定向
    }

将代码进行分割   router文件夹
import vx from 'vx';
import Util from '../libs/util';
import Router from 'vue-router';
import Cookies from 'js-cookie';
import {MineHome} from './Mine.js';
vx.use(Router);
const router = new Router({
    // mode: 'history',
    // base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/ScrollMorePage',
            name: 'ScrollMorePage',
            component: ScrollMorePage
        },
        MineHome,
     
    ]
});
//也可以在此文件夹下进行路由守卫

router.beforeEach((to, from, next) => {
    iView.LoadingBar.start();
    Util.title(to.meta.title);
    if (Cookies.get('locking') ==&