当前位置:Gxlcms > JavaScript > vuerouter:dynamicroutematching动态路由匹配

vuerouter:dynamicroutematching动态路由匹配

时间:2021-07-01 10:21:17 帮助过:35人阅读

这篇文章主要介绍了关于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)理解大半了,然后尝试自己写配置,设计架构。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

自制vue组件通信插件之用mixin写插件

配置|electron+vue+ts+sqlite的配置方法

以上就是vue router: dynamic route matching动态路由匹配的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行