Named route

stay Vue Router in except path outside , It can also provide... For any route name.

const routes = [
  {
    
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

To link to a named route , Can be directed to router-link Component's to Property to pass an object ：

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>

It can also be used router.push() ：

router.push({
     name: 'user', params: {
     username: 'erina' } })

In both cases , The route will navigate to the path /user/erina.

Named view

Sometimes I want to ( At the same level ) Show multiple views , Instead of nested presentation , For example, create a layout , Yes sidebar ( Side navigation ) and main ( Main content ) Two views , At this time, you can use the named view .

scene ： There are multiple individually named views in the interface , Not just a single exit .

If router-view No name set , Then the default is default.

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

One view rendered with one component , So for the same route , Multiple views require multiple components .
Be careful ：component To be changed to components

routes: [
    {
    
      path: '/',
      components: {
    
        default: Home,
        // LeftSidebar: LeftSidebar  Abbreviation 
        LeftSidebar,
        //  They are associated with  `<router-view>`  Upper  `name`  Attribute matching 
        RightSidebar,
      },
    },
  ],

const router = new Router({
    
  mode: 'history',
  routes,
})

Nested named views

The official sample

• Nav Just a regular component .
• UserSettings Is a view component .
• UserEmailsSubscriptions、UserProfile、UserProfilePreview Is a nested view component .

UserSettings Component's <template> The part should be similar to the following code :

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar />
  <router-view />
  <router-view name="helper" />
</div>

The above layout can be realized through this routing configuration ：

{
    
  path: '/settings',
  //  You can also configure named views on top-level routes 
  component: UserSettings,
  children: [{
    
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    
    path: 'profile',
    components: {
    
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}