【Vue-Router】命名视图

命名视图

同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。

可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。

如果 router-view 没有设置名字,那么默认为 default。一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。

First.vue

html 复制代码
<template>
  <h1>First Seciton</h1>
</template>

Second.vue

html 复制代码
<template>
  <h1>Second Seciton</h1>
</template>

Third.vue

html 复制代码
<template>
  <h1>Third Seciton</h1>
</template>

index.ts

ts 复制代码
import { createRouter, createWebHistory } from 'vue-router'
import First from '../components/First.vue'
import Second from '../components/Second.vue'
import Third from '../components/Third.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: First,
        a: Second,
        b: Third,
      },
    },
    {
      path: '/other',
      components: {
        default: Third,
        a: Second,
        b: First,
      },
    },
  ],
})

App.vue

html 复制代码
<template>
  <h1>Named Views</h1>
  <ul>
    <li>
      <router-link to="/">First page</router-link>
    </li>
    <li>
      <router-link to="/other">Second page</router-link>
    </li>
  </ul>
  <router-view></router-view>
  <router-view name="a"></router-view>
  <router-view name="b"></router-view>
</template>

<script setup lang="ts">

</script>

<style scoped></style>


嵌套命名视图


First.vue

html 复制代码
<template>
  <h1>First Seciton</h1>
</template>

Second.vueThird.vue代码同理

UserSettings.vue

html 复制代码
<template>
  <h1>UserSettings</h1>
  <router-link to="/settings/children1">children1</router-link>
  <br />
  <router-link to="/settings/children2">children2</router-link>
  <br>
  <button @click="toBackPage">返回</button>
  <hr>
  <router-view></router-view>
  <router-view name="a"></router-view>
  <router-view name="b"></router-view>
</template> 

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const toBackPage = () => {
  router.go(-1);
}
</script>

<style scoped></style>

index.ts

ts 复制代码
import { createRouter, createWebHistory } from 'vue-router'
import First from '../components/First.vue'
import Second from '../components/Second.vue'
import Third from '../components/Third.vue'
import UserSettings from '../components/UserSettings.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/settings',
      component: UserSettings,
      children: [
        {
          path: 'children1',
          components: {
            default: First,
            a: Second,
            b: Third,
          },
        },
        {
          path: 'children2',
          components: {
            default: Third,
            a: Second,
            b: First,
          },
        },
      ]
    },

  ],
})

App.vue

html 复制代码
<template>
  <h1>Nested Named Views</h1>
  <hr>
  <router-view></router-view>
  <hr>
</template>

<script setup lang="ts">

</script>

<style scoped></style>


相关推荐
三翼鸟数字化技术团队12 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2381 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆1 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang1 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
前端Hardy1 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html