vue-router中的命名路由、嵌套路由以及命名视图

命名路由

引用官网上的一段话：
除了 path 之外，你还可以为任何路由提供 name。这有以下优点：

• 没有硬编码的 URL
• params 的自动编码/解码。
• 防止你在 url 中出现打字错误。
• 绕过路径排序（如显示一个）

修改src/router/index.js

// src/router/index.js

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

修改App.vue进行命名路由的访问

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

按照官方文档给出的优点解释下，

• 使用命名路由后，当路径发生变化时，只需要修改src/router/index.js中的路径，无需修改标签内的值
• 使用url拼接传参时需要手动对url进行编解码，通过params传参则系统内部会帮我们处理
• 第三点就不说了
• 举个例子：

// 例如 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不一样

嵌套路由

如上图情况，这个时候我们就可以使用嵌套路由

修改src/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,
	    },
    ]
  },
]

修改App.vue Parent.vue进行命名路由的访问

// 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>

先访问根路径 http://127.0.0.1:5173/

再访问http://127.0.0.1:5173/#/parent

最后访问下http://127.0.0.1:5173/#/childrenA 和 http://127.0.0.1:5173/#/childrenB


是不是有人已经发现，App.vue其实就是一个父视图，里面显示的视图就是嵌套里的子视图，但在router中并未体现

命名视图

引用官方文档：
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

上图中的 head、content、foot 如果互相独立，这个时候就可以使用命名视图。
上代码：
配置src/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>

显示效果如下：