vue-router—4重定向和别名

我就是我 2022-01-21 10:37 130阅读 0赞

import Vue from 'vue'
    import VueRouter from "vue-router";
    
    
    // 作为vue的插件
    Vue.use(VueRouter)
    import home from "@/components/home";
    import about from "@/components/about";
    import document from "@/components/document";
    import noFound from "@/components/404";;
    
    
    let router = new VueRouter({
        mode: 'history',
        linkActiveClass: 'is-active',
        routes: [
            {
                path: '/home',
                name: 'Home',
                component: home,
                alias: '/index' //别名
            },{
                path: '/about',
                name: 'About',
                component: about
            },{
                path: '/document',
                name: 'Document',
                component: document
            },{
                path:'*',
                redirect: (to)=>{ //动态改变重定向的目标
                    // 目标路由对象，就是访问的路径的路由信息
                    if(to.path == '/123'){
                        return '/home'
                    }else if(to.path === '/456'){
                        return {path: '/document'}
                    }else {
                        return {name : 'About'}
                    }
                }
                // redirect: {name: 'About'}
                // redirect: '/home'
                // component: noFound
            }
        ]
    });
    export default router;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220121/1fbbeac5950d437ebdbe18c8350a10f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220121/9b1113f91ad84b14af36a8194d5fa55d.png