vue子路由跳转实现tab选项卡

最新推荐文章于 2024-07-19 17:31:23 发布

kleinBlue.

最新推荐文章于 2024-07-19 17:31:23 发布

阅读量1.2k

点赞数 1

分类专栏： web前端 Vue 文章标签： css html vue.js

本文链接：https://blog.csdn.net/qq_43299703/article/details/120514206

版权

本文介绍如何在Vue.js应用中使用路由器实现tab选项卡布局。通过<router-link>组件设置导航链接，利用<router-view>作为内容插槽，结合路由配置和JSON数据动态生成导航条，实现子路由的平滑切换。此方法适用于后台管理系统，允许后期灵活添加新的导航项。

摘要由CSDN通过智能技术生成

现在很多的后台管理系统都采用tab选项卡的布局，左边是导航栏固定，右边是对应的页面，每次点击左边的导航标题，只有右面的对应页面再切换，而vue要做tab选项卡，推荐使用<router-link></router-link>实现a标签的效果，然后使用<router-view></router-view>实现插槽的效果，把对应的页面 "塞" 进去，具体实现看下面的案例：

1、这是tab选项卡的页面，布局就不说了，主要是<router-link :to="a.url" :key="index" v-for="(a,index) in Data">{ {a.title}}</router-link>，其中to指向你要跳转的路径，这是关键，而<router-view></router-view>就是最终其他子页面要显示的地方

<template>
  <div class="index-box">
    <nav>
      <h1>导航</h1>
      <!-- 所有的导航标题，进行路由跳转指向 -->
      <router-link :to="a.url" :key="index" v-for="(a,index) in Data">{
  {a.title}}</router-link>
    </nav>
    <div class="content">
      <!-- 路由插槽：路由跳转的位置