A brief analysis of dynamic routing and named views in Vue.js

The content of this article is about a brief analysis of dynamic routing and named views of Vue.js. It has certain reference value. Now I share it with you. Friends in need can refer to it

Dynamic routing
Dynamic routing can actually be called routing parameters.

const router = new VueRouter({
  routes: [    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

The path in the above form is a dynamic route. After the colon are the parameters, which can be followed by multiple parameters. Each parameter is set to this.$route.params.

Note that /user/:id and /user/:name, when the parameters change, the component will be reused, so the component life cycle hook will not be called again. When reusing components, you can monitor whether the route changes by monitoring changes in the $route object.

The routing hook beforeRouterUpdate will also be executed.

vue-router uses path-to-regexp as the path matching engine. If the path is complex, you can learn advanced matching patterns. However, the path should generally not be designed to be too complex. If it is too complex, you should consider how to simplify it

Named views

Sometimes you want to display multiple views at the same time (sibling) , for example, create a layout with two views: sidebar (side navigation) and main (main content). At this time, naming the view comes in handy. Instead of having a single outlet, you can have multiple individually named views in your interface. If router-view does not set a name, it defaults to default.

<router-view class="view one"></router-view>
<router-view class="view two" name="sidebar"></router-view>
<router-view class="view three" name="header"></router-view>

A view is rendered using one component, so for the same route, multiple views require multiple components. Make sure to use components configuration correctly (with s):

routes: [
    {
      path: '/',
      components: {        default: Foo,
        a: SideBar,
        b: Header
      }
    }
  ]

Related recommendations:

Vue.js dynamics Routing and named views

Named views in vue

vue-router The basics of routing are simple introduce

The above is the detailed content of A brief analysis of dynamic routing and named views in Vue.js. For more information, please follow other related articles on the PHP Chinese website!