current position:Home>Vue router named routes, (nested) named views

Vue router named routes, (nested) named views

2022-04-29 18:25:06Rookie_ Xiao Ka kumou

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
 Insert picture description here

  • 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
    }
  }]
}

copyright notice
author[Rookie_ Xiao Ka kumou],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291825012063.html

Random recommended