How to realize bread crumb navigation in vue project
This article mainly introduces "how to realize bread crumb navigation in vue project". In daily operation, I believe many people have doubts about how to realize bread crumb navigation in vue project. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to realize bread crumb navigation in vue project". Next, please follow the editor to study!
The specific effects are as follows
Installation dependency
Npm i vuex
Create tagView.vue
{{tag.title}} shut down other closes all import ScrollPane from'.. / scrollPane/scrollpane' export default {name: "tags-view", components: {ScrollPane}, data () {return {visible: false, top: 0, left: 0, selectedTag: {} ScrollAction: false}}, computed: {visitedViews () {return this.$store.state.tagsView.visitedViews}}, watch: {$route () {this.addViewTags () this.moveToCurrentTag ()}, visible (value) {if (value) {document.body.addEventListener ('click') This.closeMenu)} else {document.body.removeEventListener ('click', this.closeMenu)}, mounted () {this.addViewTags ()}, methods: {generateRoute () {if (this.$route.name) {return this.$route} return false} IsActive (route) {return route.path = this.$route.path}, addViewTags () {const route = this.generateRoute () if (! route) {return false} this.$store.dispatch ('addVisitedViews', route)} MoveToCurrentTag () {const tags = this.$refs.tag this.$nextTick (() = > {for (const tag of tags) {if (tag.to.path = this.$route.path) {this.$refs.scrollPane.moveToTarget (tag.$el) break})} CloseSelectedTag (view) {this.$store.dispatch ('delVisitedViews') View) .then ((views) = > {if (this.isActive (view)) {const latestView = views.slice (- 1) [0] if (latestView) {this.$router.push (latestView)} else {this.$router.push ('/ homePage')})} CloseOthersTags () {this.$router.push (this.selectedTag) this.$store.dispatch ('delOthersViews', this.selectedTag). Then (() = > {this.moveToCurrentTag ()})}, closeAllTags () {this.$store.dispatch (' delAllViews') this.$router.push ('/ homePage')}, openMenu (tag) E) {this.visible = true this.selectedTag = tag this.left = e.clientX + 30 / / 15: margin right this.top = e.clientY}, closeMenu () {this.visible = false}} @ import'. / tagView.scss'
Create 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;}
Create 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
Create scrollPane.vue
Const padding = 15 / / tag's padding export default {name: 'scrollPane', data () {return {left: 0}}, methods: {handleScroll (e) {const eventDelta = e.wheelDelta | |-e.deltaY * 3//wheelDelta:-120 DeltaY:-120 const $container = container const $containerWidth outside this.$refs.scrollContainer// = width of container outside const $wrapper = this.$refs.scrollWrapper// inside const $wrapperWidth = $wrapper.offsetWidth// width if (eventDelta > 0) {this.left = Math.min (0, this.left + eventDelta) / / min () method returns the lowest value of the specified number. } else {if ($containerWidth-padding)
< $wrapperWidth) { if (this.left < -($wrapperWidth - $containerWidth + padding)) { this.left = this.left } else { this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding) } } else { this.left = 0 } } }, moveToTarget($target) { const $container = this.$refs.scrollContainer const $containerWidth = $container.offsetWidth const $targetLeft = $target.offsetLeft const $targetWidth = $target.offsetWidth if ($targetLeft < -this.left) { this.left = -$targetLeft + padding } else if ($targetLeft + padding >-this.left & & $targetLeft + $targetWidth <-this.left + $containerWidth-padding) {} else {this.left =-($targetLeft-($containerWidth-$targetWidth) + padding)}. Scroll-container {white-space: nowrap; position: relative; overflow: hidden; width: 100%; height: 100%; box-sizing: border-box;}. Scroll-wrapper {height: 100% Line-height: 41px; position: absolute;}
Index.js configuration in store
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
Type.js configuration in store
Export const LOGIN = 'login'export const LOGOUT =' logout'export const TITLE = 'title'
Router.js modifies configuration
Yes, click the left button to clean the cache according to the router-view display.
Finally, store.js is introduced into main.js.
Import store from'. / store/index' / / Import the status manager VueX new Vue ({el:'# app', router, store, components: {App}, template:'}). This is the end of the study on "how to implement breadcrumb navigation in the vue project". Hope to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
