Vue路由分模块 与 子路由嵌套,

路由模块化

 

创建文件路径如下：

 

路由模块化思路

/**
*
* 还是导入导出那一套,首先新建语义化的文件,在js文件中导出export default { // XXX }
* 导出多个路由模块要加[]，例如export default [{},{}],
* 在router.js引入，写在路由里，需要...引入的名字，这导出的一个不需要...
*
*/

1、新建文件后 内容如下方

新建的sort.js文件

/**
 * 多个分模块路由。
 */

export default [{
    // 如果多个路由分模块需要一个数组导出
    path: '/mySort',
    name: '',
    component: () =>
        import ('@/views/排序/mySort.vue'),

}, {
    path: '/mySort1',
    name: '',
    component: () =>
        import ('@/views/排序/mySort1.vue')
}]

新建的NoFond.js文件

/**
 * 404路由模块
 */
export default {
    // 路由分模块
    // 如果url找不到就会报404,必须放在路由页面最下面
    path: "/:pathMatch(.*)",
    component: () =>
        import ("@/views/404页面/NotFound.vue"),
}

2、当然views也要创建相同文件

3、在router.js 引入

 

 

 以上配置路由分模块已完成

 

 

 

 配合代码图文并茂更易理解

位置：router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
// 重写 router push 方法， 解决编程式路由往同一地址跳转时会报错的情况
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
    return originalPush.call(this, location).catch(err => err)
}
const routes = [
    // 重定向
    {
        path: "/",
        redirect: "/Login",
    },
    /*  
     思路：没底部导航直接在最外层，
     最外层是经过app.vue, 新建一个文件（Index.vue）， 这个文件写在最外层
     它里面放坑 <router-view></router-view>，
     有底部导航经过这个Index
     */

    //经过app.vue的坑 没底部导航,因为app.vue没有写底部导航
    {
        path: "/my",
        name: "my",
        component: () =>
            import ("../views/My.vue"),
    },
    {
        // 演出下面有二级路由
        path: "/show",
        name: "show",
        component: () =>
            import ("../views/show/Index.vue"), //父亲路由 坑
        children: [{
                path: "/showhome", //儿子路由
                name: "showhome",
                component: () =>
                    import ("../views/show/Home.vue"),
            },
            {
                path: "/showorder", //儿子路由
                name: "showorder",
                component: () =>
                    import ("../views/show/Order.vue"),
            },
        ],
    },

    // 以下的进index不进app.vue  有底部导航
    {
        path: "/index",
        name: "index",
        component: () =>
            import ("../views/Index.vue"),
        children: [

            {
                path: '/Login',
                name: '',
                component: () =>
                    import ('../views/Login.vue')
            },
            {
                path: "/radio",
                name: "radio",
                component: () =>
                    import ("../views/Radio.vue"),
            },
            {
                path: "/sradio",
                name: "sradio",
                component: () =>
                    import ("../views/Sradio.vue"),
            },
            {
                path: "/home",
                name: "home",
                component: () =>
                    import ("../views/Home.vue"),
            },
        ],
    },
    // 以上的进index不进app.vue  有底部导航

];

const router = new VueRouter({
    routes,
});
// 后面跟的是回调函数 把一个函数作为参数传递给另一个函数，特点是不会立即执行，调用传过来的参数才会执行
router.beforeEach((to, from, next) => {

    if (localStorage.getItem("user")) {
        next()
    } else {
        if (to.path == "/Login") {
            next()
        } else {
            next("/Login")
        }
    }
})

export default router;

 

路由tabBer完！