【Vue Router】006-命名视图

港控/mmm° 2023-10-01 11:34 7阅读 0赞

## 1.6 命名视图 ##

### 1.6.1 概述 ###

有时候需要同时（同级）显示多个视图，而不是嵌套显示。比如创建一个布局，有 header 头部、sidebar 侧边栏、main 主内容等，这个时候就可以使用命名视图，可以同时在一个页面上定义多个命名视图！

### 1.6.2 基本写法 ###

#### 命名路由 ####

<router-view name="header"></router-view>
    <router-view name="sidebar"></router-view>
    
    <router-view></router-view>

#### 导航配置 ####

> 导航配置 index.js 里面的部分内容

{
        
        path: '/',
        components: {
        
            // 注意这里对应三个不同的组件
            default: Main,
            header: Header,
            sidebar: Sidebar
        }
    }

### 1.6.3 代码演示 ###

> 可参考的文章：https://www.cnblogs.com/144823836yj/p/14908899.html
> 
> 此时，我觉得命名视图仍然有很大可探索的空间，我对概念还不是特别清晰！时间：2021年06月22日 14时06分09秒

#### 第一步：修改 News.vue 组件 ####

<template>
      <div>新闻页面</div>
      <router-view name="one" />
      <router-view name="two" />
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style>

#### 第二步：创建 One.vue 和 Two.vue 组件 ####

> 大致内容如下

<template>
      这是 one 组件
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style>

#### 第三步：修改导航 index.js 配置文件 ####

> 写法一：打开 news 的时候直接重定向到 /news/test ，此时 one 和 two 就显示了；

import {
         createRouter, createWebHashHistory } from 'vue-router'
    import Study from '../views/Study.vue'
    import Home from '../views/Home.vue'
    import News from '../views/News.vue'
    import One from '../views/One.vue'
    import Two from '../views/Two.vue'
    import Books from '../views/Books.vue'
    import Videos from '../views/Videos.vue'
    import Book from '../views/Book.vue'
    const routes = [
      {
        
        path: '/',
        component: Study,
        name: 'study',
        redirect: '/home',
        children: [
          {
        
            path: '/home',
            name: 'home',
            component: Home
          }, {
        
            path: '/news',
            name: 'news',
            component: News,
            redirect: '/news/test', // 可以直接重定向到 /news/test ，就显示 one 和 two 了
            children: [
              {
        
                path: 'test',
                components: {
        
                  one: One,
                  two: Two
                }
              }
            ]
          }, {
        
            path: '/books',
            name: 'books',
            component: Books,
            children: [
              {
         path: '/book/:id', name: 'book', component: Book }
            ]
          }, {
        
            path: '/videos',
            name: 'videos',
            component: Videos
          }
        ]
      }
    ]
    
    const router = createRouter({
        
      history: createWebHashHistory(),
      routes
    })
    
    export default router

> 写法二：在 News.vue 组件写一个`<router-link to="/news/test">点我打开 one 和 two</router-link>` 手动点击跳转（此案例最终采用这种写法）

<template>
      <div>新闻页面</div>
      <router-link to="/news/test">点我打开 one 和 two</router-link>
      <router-view name="one" />
      <router-view name="two" />
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style>

#### 第四步：运行结果，符合预期 ####

![请添加图片描述][be315b2e8e1d440a989cd33e72d37686.png]

[be315b2e8e1d440a989cd33e72d37686.png]: https://img-blog.csdnimg.cn/be315b2e8e1d440a989cd33e72d37686.png