vue-route dynamic path parameters

1. Application scenarios: 只有一个组件, yes 多个用户ID; multiple user IDs 都要映射到这个组件上.
2. Syntax: Dynamic path parameters :start with, and only paths with different path parameters will be mapped to the same route. When a route is matched, the parameter value will be set to this.$route.params, as shown in the yellow part of the figure:

this.$route.paramsattributes can be added to each component For example, we can modify the user component:

if the route is successfully mounted <Anonymous Component>, this label will appear in Vuetools.

A route can have 多段路径参数, and the corresponding value will be set $route.paramsto


3. Features
(1) 组件复用
When using routing parameters, such as from / user/foo navigates to /user/bar, 原来的组件实例会被复用。the component's lifecycle hook will no longer be called.
(2) 匹配优先级
When a path can match multiple routes, the priority of matching is in accordance with 路由定义的顺序.
4. Advanced matching mode
vue-router uses path-to-regexp as the path matching engine, so it supports many advanced matching modes, such as: optional dynamic path parameters, matching zero or more, one or more, or even Custom regular matching. Check out its documentation to learn advanced path matching, and this example showing how vue-router uses this type of matching.