vue实现div多选全选功能_在vue中实现tab标签切换页面功能

页面效果

需求分析

在导航条上，默认打开一个页面(列表页面)，当点击列表项，打开一个详情页面，需添加到标签导航中，同时显示当前标签的页面内容，继续点击列表项，添加标签到导航中，依次类推，效果如上图。

具体功能：

• 标签可关闭；
• 标签可切换，同时内容切换；
• 标签大于可视范围，需添加到选项卡列表中，可点击切换；
• 当点击选项卡列表中的标签，需要在可视区中与最后一个标签进行切换；
• 标签的显示个数自适应；

思考

在一些后台系统中，见过类似的功能，是利用 iframe标签添加链接的方式，实现这个功能。那么在vue中怎么去实现？

首先，这是一个单页面网站应用，使用了vue-router进行前端路由，那么我们可以使用 vue-router 的命名视图，这种方式去代替iframe。

vue-router命名视图官方代码：

复制代码const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ]})复制代码
           

项目目录大同小异，就不过多解释了~~

路由文件-命名视图

router代码：

import Vue from "vue";import Router from "vue-router";import store from '../store';Vue.use(Router);// layout页面const Layout = () => import(/* webpackChunkName: "layout" */ "@/views/layout/Layout.vue");// 产品相关页面const Product = () => import(/* webpackChunkName: "product" */ "@/views/product/Index.vue");const ProductDetail = () => import(/* webpackChunkName: "productDetail" */ "@/views/product/Detail.vue");// 新闻相关页面const News = () => import(/* webpackChunkName: "news" */ "@/views/news/Index.vue");const NewsDetail = () => import(/* webpackChunkName: "newsDetail" */ "@/views/news/Detail.vue");const rotuer = new Router({ mode: "history