vue router: dynamic route matching dynamic route matching

This article mainly introduces about vue router: dynamic route matching. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

Recently, I have compiled several Vue routers. Single-page applications are merged and upgraded into multi-page applications to reduce code redundancy and repeated packaging. Since it is stuffed into the original Django structure and Vue-cli configuration, there will be many configuration changes made to match Django. It is not universally portable and is for reference only.

The pit will be filled slowly, starting with routing. The main idea is that one entrance corresponds to a single-page application. Each single-page application is independent and there are no routing jumps between each other. In a single-page application, there are routing jumps between multiple components, so each single-page application Page applications have their own routing configuration.

Dynamic route matching is to map all routes matched by a certain pattern to the same component.

According to the examples given in the official documents, for example, we have a RequestList component that contains the basic information of all Requests. Click the ID of a Request to jump to view the detailed information of the Request. For all the IDs with different Requests can be rendered using the RequestDetail component, and the effect can be achieved through "dynamic path parameters (Dynamic Segment)".
In this way, /demo/request/1 and /demo/request/2 will be mapped to the same route. The parameters are passed to the component RequestDetail through the route, which can be passed this.$route.paramsAccess the passed parameters. There may be one parameter or multiple parameters.

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, //路由传参
    },
  ],
};

Sometimes it can also be configured as a route with query parameters, but I personally feel that such a route /demo/request?requestId=1 is not very beautiful and exposes the parameters to user.

{
    path: '/request',
    name: 'requestDetail',
    component: RequestDetail,
    props: route => ({ requestId: route.query.requestId }), //路由传参
},

This week I added a new single-page application to the multi-page application and configured dynamic routing. In dev development mode, it can only match the root route/ , always cannot get sub-route, nothing can be rendered. At first, I didn't find the right keywords to search for related issues. After struggling for a long time, I finally found that someone had encountered the same problem 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 :)

In fact, this bug is in the current Vue It has been solved in the webpack template. There is historyApiFallback in the devServer configuration of webpack.dev.conf.js. When we use the HTML5 History API, index.html will be found in 404 It will be returned when the resource is not available. What is the index.html here?

historyApiFallback: {
    rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
    ],
},

In the dev development mode, it is actually equivalent to setting up a virtual server locally, and a single-page application corresponds to one html Template file, the js css code of all related components corresponding to the entrance will be injected into this html template file, so our routing configuration also needs to be parsed and matched with the js code in the corresponding template file. However, due to my multi-page application configuration, when I enter /demo/request/1 in the address bar, I cannot find the matching resource and need to return to the corresponding html template file. This is also related to the template file path of your dev configuration.

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') },
      ],
  },
}

Many front-end newcomers will choose to use Vue-cli to build projects when they first come into contact with Vue. The template configuration is configurable to a certain extent and is complete, which is enough to meet the needs of general single-page applications. It really saves trouble. However, the front-end no longer only focuses on the code, but also on the design of the entire project architecture. A good structure is equivalent to half the battle, and the subsequent development process will be very smooth.

The front-end is not as simple as laymen imagine, although it is not very complicated. Position yourself as a front-end architect, not a code porter. Therefore, it is highly recommended that everyone who wants to delve deeper into the front-end can interpret and straighten out the Webpack configuration of Vue-cli (the same is true for React), and then go through the webpack documentation completely. You can basically divide the front-end engineering code splitting (Code Splitting) and I understand most of Lazy Loading, and then try to write the configuration and design the architecture myself.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Self-made vue component communication plug-in using mixin to write plug-ins

Configuration|electron vue ts sqlite Configuration method

The above is the detailed content of vue router: dynamic route matching dynamic route matching. For more information, please follow other related articles on the PHP Chinese website!