【Vue Router】006-命名视图

訾博ZiBo

发布于 2025-01-06 14:22:31

4600

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

1.6 命名视图

1.6.1 概述

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

1.6.2 基本写法

命名路由

<router-view name="header"></router-view>
<router-view name="sidebar"></router-view>
<!--没有定义名字默认为 default-->
<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>