这篇文章主要介绍了关于vue router: dynamic route matching动态路由匹配，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
最近在把几个vue单页面应用合并升级成多页面应用，减少代码冗余和重复打包。由于是在原有的django结构和vue-cli配置里塞东西，所以会有很多为了配合django而产生的配置更改，不具有普遍的移植性，仅供参考。
坑会慢慢填的，先从路由开始。主要思路就是一个入口对应一个单页面应用，每个单页面应用都是独立的，互相之间不存在路由跳转，而单页面应用中存在多个组件之间的路由跳转，因此每个单页面应用都有自己的路由配置。
动态路由匹配，就是把某种模式匹配到的所有路由全部映射到同个组件。
根据官方文档给出的实例，例如我们有一个requestlist组件包含了所有的request的基本信息，点击某个request的id可跳转查看该request的详细信息，对于id不同的所有request都可以用requestdetail组件来渲染，可以通过“动态路径参数（dynamic segment）”来实现效果。
这样/demo/request/1 和、/demo/request/2都会映射到相同的路由，参数通过路由传递给组件requestdetail，可通过this.$route.params访问到传递来的参数，参数可能是一个，也可能是多个。
import requestlist from '@/components/requestlist';import requestdetail from '@/components/requestdetail';export default {  base: '/demo/',  mode: 'history',  linkactiveclass: 'active',  routes: [    {      path: '/',      name: 'requestlist',      component: requestlist,    },    {      path: '/request/:requestid',      name: 'requestdetail',      component: requestdetail,      props: props, //路由传参    },  ],};
有时候也可以配置成带查询参数的路由，但个人觉得这样的路由/demo/request?requestid=1长得不是很美观，而且把参数暴露给用户了。
{    path: '/request',    name: 'requestdetail',    component: requestdetail,    props: route => ({ requestid: route.query.requestid }), //路由传参},
这周在多页面应用中加了一个新的单页面应用，配置了动态路由，在dev开发模式下却只能匹配到根路由/，一直cannot get子路由，什么都渲染不出来。开始也没有找到合适的关键词去搜索相关issue,折腾了大半天终于发现有人也遇到了同样的问题why-does-vue-router-webpack-dev-server-shows-cannot-get-path-on-page-refresh。
it turns out it was a bug in the vue webpack template on windows
ok, fine :)
其实这个bug在现在的vue webpack template里已经解决了，在webpack.dev.conf.js的devserver 配置中有historyapifallback. 当我们使用html5 history api的时候，index.html会在404找不到资源的时候被返回，这里的index.html是什么?
historyapifallback: {    rewrites: [        { from: /.*/, to: path.posix.join(config.dev.assetspublicpath, 'index.html') },    ],},
在dev开发模式下，其实是相当于在本地起了一台虚拟的服务器，一个单页面应用对应一个html模板文件，入口对应的所有相关组件的js css代码都会被注入到这个html模板文件里，所以我们的路由配置也需要到相应的模板文件里的js代码去解析、匹配。但是由于我的多页面应用配置，当我在地址栏输入/demo/request/1，其实是找不到匹配的资源的，需要返回到相对应的html模板文件中去,这也和你dev配置的模板文件路径有关。
devserver: {  historyapifallback: {      rewrites: [        { from: /^\/demo/, to: path.posix.join(config.dev.assetspublicpath, 'demo/index.html') },        { from: /^\/test/, to: path.posix.join(config.dev.assetspublicpath, 'test/index.html') },      ],  },}
很多前端萌新在刚接触vue的时候，都会选择用vue-cli去搭项目，模板的配置在一定程度上可配置也很完整，足够满足一般单页面应用的需求，确实省事。但是前端早已不是只注重代码，而是关注到整个项目架构的设计，一个好的结构相当于成功了一半，后续开发流程会非常流畅。
前端并没有外行想象的那么简单，虽然也没有很复杂，给自己的定位是前端架构师，而不是代码的搬运工。所以非常建议想要在前端深入的各位，把vue-cli的webpack配置解读理顺（react同理），再把webpack的文档完整撸一遍，基本可以把前端工程化的代码分割(code splitting)和懒加载(lazy loading)理解大半了，然后尝试自己写配置，设计架构。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
自制vue组件通信插件之用mixin写插件
配置|electron+vue+ts+sqlite的配置方法
以上就是vue router: dynamic route matching动态路由匹配的详细内容。