Named routes, nested routes and named views in vue-router

named route

To quote a passage on the official website:
In addition to path, you can also provide name for any route. This has the following advantages:

no hardcoded URLs

Automatic encoding/decoding of params.

Prevents you from making typos in urls.

Bypass path sorting (like display one)

Revisesrc/router/index.js

// src/router/index.js

const routes = [
  {
    
    
  // path 定义为restful 风格
    path: '/user/:username',
    name: 'user',
    component: User,
  },
]

Modify App.vueaccess for named routing

// 注意这里需要将 to => :to,需要动态绑定
// name 为 src/router/index.js 定义的路由名称
// params 为 restful 风格传参，参数存放的地方 （在路由传参再说）
<router-link :to="{name:'user', params:{username: 'zs'}">go to about</router-link>

According to the advantages given in the official documents,

After using the named route, when the path changes, only src/router/index.jsthe path in the path needs to be modified, and there is no need to modify the value in the label
When using url splicing to pass parameters, you need to manually encode and decode the url. Passing parameters through params will help us handle it internally.
I won't talk about the third point
for example:

// 例如 restful 风格下

// 访问链接为 http://127.0.0.1:5173/#/user/zs
<router-link :to="{name:'user', params:{username: 'zs'}">go to about</router-link>
// 访问链接为 http://127.0.0.1:5173/#/user/ls
<router-link :to="{name:'user', params:{username: 'ls'}">go to about</router-link>

// 两个url 指向的是同一个地址，只是usename不一样

nested routes

insert image description here
As shown above, we can use nested routing at this time

Revisesrc/router/index.js

// src/router/index.js

const routes = [
  {
    
    
    path: '/parent',
    name: 'Parent',
    component: Parent,
    children:[
	    {
    
    
	    	path: '/childrenA',
	    	name: 'ChildrenA',
	    	component: ChildrenA,
	    },
	    {
    
    
	    	path: '/childrenB',
	    	name: 'ChildrenB',
	    	component: ChildrenB,
	    },
    ]
  },
]

Modify App.vue Parent.vueaccess for named routing

// App.vue
<template>
	<router-link to="/parent>go to Parent</router-link>
	<router-view></router-view>
</template>

// Parent.vue
<template>
  <div>
    <router-link to="/childrenA">childrenA</router-link>
    <router-link to="/childrenB">childrenB</router-link>
    <router-view></router-view>
  </div>
</template>

First visit the root path http://127.0.0.1:5173/
insert image description here
and then visit http://127.0.0.1:5173/#/parent

the last visit http://127.0.0.1:5173/#/childrenAand http://127.0.0.1:5173/#/childrenB

Has anyone discovered App.vuethat it is actually a parent view, and the view displayed in it is a subview in the nest, but it is not reflected in the router

named view

Citing official documents:
Sometimes you want to display multiple views at the same time (same level) instead of nested display, for example, create a layout with two views: sidebar (side navigation) and main (main content). At this time, the named view is sent Come in handy. You can have multiple individually named views in the interface instead of just one single outlet. If router-view does not set a name, it defaults to default.

If the head, content, and foot in the above figure are independent of each other, you can use the named view at this time.
Above code:
configurationsrc/router/index.js

const routes = [
  {
    
    
    path: '/parent',
    components: {
    
     default: Content, 'head': Head, 'foot': Foot }
  },
  {
    
     path: '/:path(.*)', component: NotFound },
]

// App.vue
<template>
  <div style="height: 60px; background-color: aqua;">
    <router-view name="head"></router-view>
  </div>
  <div style="height: 60px; background-color: aquamarine;">
    <router-view style="height:500px"></router-view>
  </div>
  <div style="height: 60px;background-color: bisque;">
    <router-view style="height:80px" name="foot"></router-view>
  </div>
</template>

The display effect is as follows:

insert image description here