VueRouter Basic tutorial series 🎉

Routing component

  1. Maps to routing records (routing configuration items).
  2. Be VueRouterrouter-viewComponent rendering.

Route component parameters are transmitted

The purpose of using the routing component to pass parameters is to decouple the component from the router. When a component can only get routing information through this.$route, it limits the flexibility of the component because it only works in routing scenarios. Now, if the router can pass its own information to the component as props, the routing component is no different from the ordinary component as regards the props parameter, and the coupling relationship with the router is greatly reduced.

The Boolean model

When the props property of the routing configuration item is set to true, the values in $route.params are set to the props of the component

const routes = [
    {
        path: '/user/:id'.props: true.component: {
            props: ['id'].template: '<div>{{id}}</div>'}}];Copy the code

Object pattern

When the props property of the routing configuration item is an object, the object is set to the props of the component as is.

const routes = [
    {
        path: '/user/:id'.props: {
            id:'10001'.name:'Alice'
        },
        component: {
            props: ['id'.'name'].template: '<div>{{id}}-{{name}}</div>'}}];Copy the code

This is useful when props are static.

The function mode

The value of the props option of the routing configuration item can also be a method, which is useful for setting more flexible props for a component. For example, you can combine static props with query and hash in the routing information and pass it into the component.

const routes = [
    {
        path: '/user/:id'.props: (route) = > {
            console.log(route)
            return { name: 'Alice'.id: route.params.id, q: route.query }
        },
        component: {
            props: ['id'.'name'.'q'].template: '<div>{{id}}-{{name}}-{{q}}</div>'}}];Copy the code

Named view

Because the named view has multiple route rendering outlets (there are multiple components), we define the props configuration for each named view:

const routes = [
  {
    path: '/user/:id'.components: { default: User, sidebar: Sidebar },
    props: { default: true.sidebar: false}}]Copy the code