蒙自建设网站,wordpress防cc,网站推广的含义,网站建设计划书设想一下#xff0c;我们在做一个体量非常大的项目#xff0c;这个项目有很多的模块和相当多的页面。当我们想修改一个路由的时候#xff0c;我们打开了router文件夹下的index.js文件时#xff0c;一串长到鼠标滚轮需要滚大半天才滚到底的路由简直让人头皮发麻。 在开始之前…设想一下我们在做一个体量非常大的项目这个项目有很多的模块和相当多的页面。当我们想修改一个路由的时候我们打开了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-routerconst 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-routerexport 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 vueexport default {setup() {const route useRoute()const userData ref()// 当参数更改时获取用户信息watch(() route.params.id,async newId {userData.value await fetchUser(newId)})},
}请注意在模板中我们仍然可以访问 $router 和 $route所以不需要在 setup 中返回 router 或 route。
