如何在Vue项目中使用路由实现标签页导航？

1. 前言

很多网站中都有标签页导航，随着用户在网站上进行浏览操作，标签页不断增加或者减少，通过标签来快速定位浏览过的页面，从而提高用户的使用体验。在Vue项目中使用路由实现标签页导航也是可以很容易实现的。

2. Vue Router简要介绍

Vue Router是Vue.js官方的路由管理器。它与Vue.js核心深度集成，使得构建单页面应用变得非常容易。它可以轻松的实现路由的导航、路由间的传参等等功能。

Vue Router有以下几个核心概念：

路由组件：每一个路由都映射一个组件。

路径/path：每个路由都有一个路径，路径就是浏览器地址栏中的url地址。

路由/router：路由就是定义的各个路径。在路由中定义每个路径应该对应的组件等信息。

路由守卫/Router guard：在导航过程中，可能需要在跳转前或跳转后对路由做一些处理，比如验证用户是否登录等等。这个时候可以使用路由守卫。

3. 在Vue项目中使用路由实现标签页导航

3.1 安装 Vue Router

在项目中首先需要安装Vue Router。通过npm安装即可。命令如下：

npm install vue-router --save

3.2 创建路由对象

创建一个router.js文件，在文件中创建路由对象

import Vue from 'vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: {
      title: '首页'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
    meta: {
      title: '关于'
    }
  }
]
const router = new VueRouter({
  mode: 'history',
  routes
})
export default router

在这个路由对象中，我们定义了两个路由，一个是首页，另一个是关于页面。路由对象定义了每个路径应该对应的组件。meta属性用来设置页面的标题，方便后面进行标签页导航。

3.3 创建标签组件

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      visitedViews: state => state.tagsView.visitedViews
    })
  },
  methods: {
    handleRemove(tag) {
      this.$store.dispatch('tagsView/delView', tag)
    },
    handleCloseOtherTags(tag) {
      this.$store.dispatch('tagsView/delOtherViews', tag)
    },
    handleCloseAllTags() {
      this.$store.dispatch('tagsView/delAllViews')
    }
  }
}

这个标签组件中，我们使用了Vuex来存储用户操作所产生的标签页信息，在这里展示了三个方法：

handleRemove：用来关闭单个标签页。

handleCloseOtherTags：用来关闭当前标签页外的其他所有标签页。

handleCloseAllTags：用来关闭所有标签页。

3.4 创建独立的路由入口

在App.vue中，我们可以把标签页组件和路由组件独立开来。

<!-- 标签页组件 -->

<template>
  <div class="tag-view">
    <div class="tag-view__wrap">
      <div
        v-for="tag in visitedViews"
        :key="tag.path"
        class="tag-view__item"
        :class="{ 'is-active': isActive(tag), 'is-fixed': tag.fixed }"
        @click="handleClick(tag)"
      >
        {{ tag.meta && tag.meta.title ? tag.meta.title : tag.name }}
        <i v-if="!tag.fixed" class="tag-view__close el-icon-close" @click.stop="handleRemove(tag)"></i>
      </div>
    </div>
    <div class="tag-view__btns">
      </el-tooltip content="关闭其他标签页">
        </el-button type="text" icon="el-icon-close" size="mini" @click="handleCloseOtherTags"></el-button>
      </el-tooltip>
      </el-tooltip content="关闭全部标签页">
        </el-button type="text" icon="el-icon-close" size="mini" @click="handleCloseAllTags"></el-button>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed: {
      ...mapState({
        visitedViews: state => state.tagsView.visitedViews
      })
    },
    methods: {
      isActive(tag) {
        return this.$route.path === tag.path
      },
      handleClick(tag) {
        if (tag.path !== this.$route.path) {
          this.$router.push(tag.path)
        }
      },
      handleRemove(tag) {
        this.$store.dispatch('tagsView/delView', tag)
      },
      handleCloseOtherTags(tag) {
        this.$store.dispatch('tagsView/delOtherViews', tag)
      },
      handleCloseAllTags() {
        this.$store.dispatch('tagsView/delAllViews')
      }
    }
  }
</script>
<!-- 路由组件 -->
<template>
  <div id="app">
    <div class="app__header">
      <span class="text">{{ routeName }}</span>
      <tag-view></tag-view>
    </div>
    <div class="app__content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
  import TagView from '@/components/TagView'
  export default {
    name: 'App',
    components: { TagView },
    computed: {
      routeName() {
        return this.$route.meta.title
      }
    }
  }
</script>

这样，我们既有标签页导航，又有路由组件的入口了，同时，在所有页面中都能看到标签导航。对于管理员用户来说还能更加方便地查看和进行管理操作。

结论

通过Vue Router和Vuex，我们可以方便地实现标签导航功能，提高用户操作的便捷性。