current position:Home>1x3 vuerouter - base - named route & named view

1x3 vuerouter - base - named route & named view

2021-08-26 20:10:01 Mottle

VueRouter Basic tutorial series

Named route

Use name Attribute to Routing configuration items Set alias .

const routes = [
    {
        name:'user',
        path:'/user/:id',
        component:{template:'<div>{{$route.params.id}}</div>'}
    }
]
 Copy code 

“ Named route ” Its advantages mainly include the following :

  1. Shorter route navigation address 、 Minimize the chance of spelling mistakes .
  2. Path parameter Auto Code / decode .
  3. Bypass path sorting ( For example, only one ).

Personal understanding of bypassing path sorting , It should mean that named routes can be mapped based on aliases , Thus more efficient path matching .

Now? , We use imperative Add Named route To navigate to /user/123 On .

// Automatic coding of path parameters / decode 
this.$router.push({name:'user', params:{id:'123'}});
 Copy code 

Named view

Named views can be at the same level ( The same component ) Show more routing views in , Instead of nested display . Named views can have multiple route rendering exits in a component , This is useful for some specific layout components . The concept of named views is very similar to “ A named slot ”, And the default name of the view is default.

{
    path:'/layout',
    components:{
        default:Main,
        sideBar:SideBar
    }
}
 Copy code 

HTML:

<div id="app">
    <router-view name="sideBar"></router-view>
    <router-view></router-view>
</div>
 Copy code 

Multiple route rendering exits also represent multiple components , Therefore, the routing configuration item uses the new components Options .

Navigation enhancement

Now? VueRouter The navigation function can not only be through “ route ” Navigation , You can also use “ Named route ” To navigate the path .

copyright notice
author[Mottle],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826200957700c.html

Random recommended