vueRouter路由分文件模块化

最新推荐文章于 2025-05-07 08:36:31 发布

百椰拿铁

最新推荐文章于 2025-05-07 08:36:31 发布

阅读量983

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_42312396/article/details/124145440

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中将路由进行文件模块化的处理，以解决路由增多的问题。通过在router文件夹下创建shop.js，存放独立的路由，并设置默认跳转到shopHome页面。实现过程中使用了ES6的导出语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为项目路由多起来了，要把导航对应的路由分出去，记录一下。
在router文件夹下再创建一个shop.js放单独的路由，默认跳转首页shopHome

const shopHome= () =>
    import ('../view/demo/mall/s-home.vue');//懒加载
const category = () =>
    import ('../view/demo/mall/s-category.vue');

用到了es6的模块化export，不熟悉的可以先查一下，有很多种写法。

export default [{
        path: '',
        redirect: 'shopHome'
    },
    {
        name: 'shopHome',
        path: 'shopHome',
        component: shopHome
    }, {
        name: 'category',
        path: 'category',
        component: category
    }]

index.js主路由导入

import VueRouter from "vue-router"
import App from '../App'
import shop from './shop'
const shopMall = () =>
    import ('../view/demo//shopMall.vue');

配置路由

 export default new VueRouter({
    routes: [{ //配置顶级路由，对应index.html
        path: '/',
        component: App,
        children: [{
                path: '',
                redirect: 'home'
            },
            {
                path: '/toMall',
                component: shopMall,
                children: shop
            }]
      mode: 'history',//可切换hash或者history
      linkActiveClass: 'route-active'//路由被激活时添加class
});