美文网首页
vue-router的简单使用

vue-router的简单使用

作者: plum_meizi | 来源:发表于2021-04-13 10:13 被阅读0次
    import Vue from 'vue';
    import { Component } from 'vue-property-decorator';
    import VueRouter, { RawLocation, Route, RouteConfig } from 'vue-router';
    Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate']);
    
    const home = () => import('@/views/home/Home.vue');
    // 解决路由重复跳转报错
    VueRouter.prototype.push = async function(location: RawLocation) {
        /* eslint-disable no-extra-parens */
        return ((originalPush.call(this, location) as unknown) as Promise<Route>).catch(err => err);
    };
    Vue.use(VueRouter);
    const routes: Array<RouteConfig> = [
        {
            path: '/',
            redirect: '/home',
        },
            {
            path: '/home',
            component: home,
        },
            //其他
        {
            path: '*',
            redirect: '/',
        },
    ]
    const router = new VueRouter({
        mode: 'history',
        base: process.env.BASE_URL,
        routes,
    });
    // 路由加载错误
    router.onError(err => {
        console.log('VueRouter.onError', err);
    });
    router.beforeEach((to, from, next) => {
        ajax.cancelAllRequest(); // 删除所有请求
    });
    export default router;
    

    相关文章

      网友评论

          本文标题:vue-router的简单使用

          本文链接:https://www.haomeiwen.com/subject/zkoqlltx.html