Vue中实现分布式动态路由的基本实现步骤介绍

设想一下，我们在做一个体量非常大的项目，这个项目有很多的模块和相当多的页面。当我们想修改一个路由的时候，我们打开了router文件夹下的index.js文件时，一串长到鼠标滚轮需要滚大半天才滚到底的路由简直让人头皮发麻。

在开始之前先说说适用的场景：体量非常大的项目，且这个项目分为很多的模块。

我们分布式动态路由的目的就是：实现路由模块自动化引入，让路由更加清晰直观。

实例

假设我们的项目中有两个模块，login模块和goods模块。

每个模块下都是自己模块的页面，当然不只是一个，这里只是一个简单的例子方便大家理解

然后我们修改一下router文件夹，添加login.router.js文件和goods.router.js，将文件两个模块的路由分别存放。

下面是login.router.js的代码：

复制代码

export default {
    path: '/login',
    name: 'login',
    component: () =>
        import ('../views/login/login'), //懒加载
    children: []
}

goods.router.js也是同样的道理:

复制代码

export default {
    path: '/goods',
    name: 'goods',
    component: () =>
        import ('../views/goods/goods'), //懒加载
    children: []
}

接下来是核心代码（router文件夹下的index.js文件中），也是分布式动态路由实现的关键：

复制代码

//index.js
import VueRouter from 'vue-router'

const routerList = []

function importAll(r) {
    r.keys().forEach((key) => {
        routerList.push(r(key).default)
  })
}

importAll(require.context('./', false, /.router.js/))

export default new VueRouter({
    routes: routerList
})

这样，我们的分布式动态路由就实现好了，是不是很简单！

接下来我们来实验一下，浏览器地址栏输入http://localhost:8080/#/login，页面正常显示

require.context介绍

require.context是Webpack中用来管理依赖的一个函数,此方法会生成一个上下文模块,包含目录下所有模块的引用,通过正则表达式匹配,然后require进来。

复制代码

require.context(directory, useSubdirectories, regExp)

参数：

directory: 要查找的文件路径
useSubdirectories: 是否查找子目录
regExp: 要匹配文件的正则

示例：

复制代码

require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。

动态路由

对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。

添加路由

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。

复制代码

router.addRoute({ path: '/about', component: About })

删除路由

通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })
通过调用 router.addRoute() 返回的回调：

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
通过使用 router.removeRoute() 按名称删除路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

当路由被删除时，所有的别名和子路由也会被同时删除

添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute()，这将有效地添加路由，就像通过 children 添加的一样：

复制代码

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

等效于：

复制代码

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

在 setup 中访问路由和当前路由

因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this. r o u t e r 或 t h i s . router 或 this. router或this.route。作为替代，我们使用 useRouter 和 useRoute 函数：

复制代码

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
          ...query,
        },
      })
    }
  },
}

route 对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该避免监听整个 route 对象。在大多数情况下，你应该直接监听你期望改变的参数。

复制代码

import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'

export default {
  setup() {
    const route = useRoute()
    const userData = ref()

    // 当参数更改时获取用户信息
    watch(
      () => route.params.id,
      async newId => {
        userData.value = await fetchUser(newId)
      }
    )
  },
}

请注意，在模板中我们仍然可以访问 $router 和$ route，所以不需要在 setup 中返回 router 或 route。