How to implement dynamic urls?

Question

css

Good afternoon, there is a link like:
site.ru/#category#/#product#/#type#/
Where the actual category, product, type - are pulled from the database, if not - 404
I don’t quite understand how to implement this template using the standard UrlManager, except how to implement my class with the implementation of the UrlRuleInterface interface
Or write a "route map" , that is, for each static template - register a controller / action:

'contact' => 'site/contact',
'about'   => 'site/about',
и тд.

How do you do it right so you don't shoot yourself in the foot with it?
Thanks in advance

Answer 1

Why create separate divs for each value when you can retrieve the values ​​directly from the selected option?
https://jsfiddle.net/uaoqe29v/1/

Answer 2

Try something like this (code not tested):

$(function() {
  $('select').change(function () {
      // get select natural index
      var index = $(this).index() + 1;
     
     $('.b-price-item-' + index).hide();
      $('#' + $(this).val()).show();
  });
});

Answer 3

In the routes write something like this:
'category/product' is the address of the controller/action type
In this action, get the category product type parameters, check for existence, and generate a 404 exception if necessary.