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. routerthis.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。

你可能感兴趣的:(vue,分布式,动态路由,router,路由模块自动化引入,require.context,嵌套路由,route)