vue项目怎么实现面包屑导航

这篇文章主要介绍"vue项目怎么实现面包屑导航"，在日常操作中，相信很多人在vue项目怎么实现面包屑导航问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"vue项目怎么实现面包屑导航"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

具体效果如下

安装依赖

npm i vuex

创建 tagView.vue

创建 tagView.scss

.tags-view-container {  height: 100%;}.contextmenu {  margin: 0;  background: #fff;  z-index: 100;  position: absolute;  list-style-type: none;  padding: 5px 0;  border-radius: 4px;  font-size: 12px;  font-weight: 400;  color: #333;  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);  }.contextmenu li {  margin: 0;  padding: 7px 16px;  cursor: pointer;}.contextmenu li:hover {  background: #eee;}.tags-view-wrapper a {  display: inline-block;  position: relative;  width: 100px;  padding: 0 10px;  color: #000;  background: #fff;  text-align: center;  font-size: 15px;}.action {  border-bottom: 2px solid #1AB394;}.close_Icon {  color: #fff;  margin-left: 3px;}.IconActive {  color: #b1b1b1;}

创建 tagViews.js

const tagsView = {  state: {    visitedViews: [],    cachedViews: []  },  mutations: {    ADD_VISITED_VIEWS: (state, view) => {      if (state.visitedViews.some(v => v.path === view.path)) return      state.visitedViews.push(Object.assign({}, view, {        title: view.meta.title || 'no-name'      }))      if (!view.meta.noCache) {        state.cachedViews.push(view.name)      }    },    DEL_VISITED_VIEWS: (state, view) => {      for (const [i, v] of state.visitedViews.entries()) {        if (v.path === view.path) {          state.visitedViews.splice(i, 1)          break        }      }      for (const i of state.cachedViews) {        if (i === view.name) {          const index = state.cachedViews.indexOf(i)          state.cachedViews.splice(index, 1)          break        }      }    },    DEL_OTHERS_VIEWS: (state, view) => {      for (const [i, v] of state.visitedViews.entries()) {        if (v.path === view.path) {          state.visitedViews = state.visitedViews.slice(i, i + 1)          break        }      }      for (const i of state.cachedViews) {        if (i === view.name) {          const index = state.cachedViews.indexOf(i)          state.cachedViews = state.cachedViews.slice(index, i + 1)          break        }      }    },    DEL_ALL_VIEWS: (state) => {      state.visitedViews = []      state.cachedViews = []    }  },  actions: {    addVisitedViews({ commit }, view) {      commit('ADD_VISITED_VIEWS', view)    },    delVisitedViews({ commit, state }, view) {      return new Promise((resolve) => {        commit('DEL_VISITED_VIEWS', view)        resolve([...state.visitedViews])      })    },    delOthersViews({ commit, state }, view) {      return new Promise((resolve) => {        commit('DEL_OTHERS_VIEWS', view)        resolve([...state.visitedViews])      })    },    delAllViews({ commit, state }) {      return new Promise((resolve) => {        commit('DEL_ALL_VIEWS')        resolve([...state.visitedViews])      })    }  }}export default tagsView

创建 scrollPane.vue

store中index.js配置

import Vue from 'vue'import Vuex from 'vuex'import * as types from './types'import tagsView from '../assets/js/tagsview'Vue.use(Vuex) const store = new Vuex.Store({   modules: {    tagsView  }})export default store

store中的type.js配置

export const LOGIN = 'login'export const LOGOUT = 'logout'export const TITLE = 'title'

router.js修改配置

对点击左侧按钮根据router-view显示 清理缓存

最后在main.js中引入 store.js

import store from './store/index' // 导入状态管理器VueX new Vue({  el: '#app',  router,  store,  components: { App },  template: ''})

到此，关于"vue项目怎么实现面包屑导航"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！