国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<style id="w0qm3"></style>

<abbr id="w0qm3"><track id="w0qm3"></track></abbr>

若依 vue前端動態(tài)設置路由path不同參數(shù) 在頁面容器里打開新頁面（新路由），面包屑和標簽頁標題根據(jù)參數(shù)動態(tài)改變，面包屑多級標題，側(cè)邊欄對應菜單亮起

2年前作者：坐等夕陽落time分類：Toy博客閱讀(28)違法舉報

這篇具有很好參考價值的文章主要介紹了若依 vue前端動態(tài)設置路由path不同參數(shù) 在頁面容器里打開新頁面（新路由），面包屑和標簽頁標題根據(jù)參數(shù)動態(tài)改變，面包屑多級標題，側(cè)邊欄對應菜單亮起。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

前言

因為是在vue源碼的基礎上進行修改，所以，就沒有復制代碼在文章上，采取的是截圖對比源碼和我修改的代碼片段。要麻煩你們自己手敲了。

先來看看效果：

場景：在費用配置列表中，點擊每一項的配置，都會在頁面容器內(nèi)部打開一個新頁面，所以新頁面的路徑一樣，根據(jù)傳的參數(shù)不同，面包屑和標簽頁標題動態(tài)改變

二級路由效果（這是用菜單管理新建一條隱藏的路由做法，不推薦）

http://localhost/feeManage/feeConfigDetail?id=4&metaTitle=3253的費用配置

http://localhost/feeManage/feeConfigDetail?id=1&metaTitle=eww的費用配置

若依 <router-link :to=

若依 <router-link :to=

三級路由效果（推薦）

若依 <router-link :to=

路由跳轉(zhuǎn)方法：

// 方法1
this.$router.push({
	path: '/feeManage/feeConfig/feeConfigDetail',
	query: {
	id: row.id,},
})
// 方法2
<router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
    <span>點擊跳轉(zhuǎn)</span>
</router-link>

若依路由簡單介紹：

若依vue前端能跳轉(zhuǎn)到新頁面路由的方法，我暫且知道這三種形式：

1 在若依的菜單項添加（不推薦）

若依 <router-link :to=

缺點：因為路由暴露在外面，會發(fā)生被誤刪或者修改錯誤的情況，造成嚴重缺陷。

優(yōu)點：不用寫路由配置的代碼，可以直接進行路由跳轉(zhuǎn)了。

同時還要注意，這是詳細頁面，不應該在左側(cè)菜單欄出現(xiàn)，所以要隱藏

若依 <router-link :to=

2 在router的constantRoutes里添加路由（推薦）

若依 <router-link :to=

?3 在router的dynamicRoutes里添加路由（推薦）

若依 <router-link :to=

若依字典管理的動態(tài)路由配置（如果是想實現(xiàn)像若依字典這樣的路由跳轉(zhuǎn)效果，就可以直接參考若依的源碼去做：?

? 若依 <router-link :to=

若依 <router-link :to=

若依 <router-link :to=

如果需要權(quán)限，需要自己寫權(quán)限標識（很麻煩，，對接很累）

先是后端寫上。。。

若依 <router-link :to=

?然后前端。。。

若依 <router-link :to=

若依 <router-link :to=

代碼實現(xiàn)

路由配置

實現(xiàn)三級標題的路由怎么寫？

若依 <router-link :to=

若依 <router-link :to=

{
    path: '/feeManage',
    component: Layout, // 一級這個component: Layout必填，除非是不需要在頁面容器里打開的頁面
    hidden: true, // false：顯示在側(cè)邊欄菜單
    redirect: 'noRedirect', // noRedirect：面包屑不可點擊，不寫這個，父級標題樣式就和首頁一樣，黑字可點擊跳轉(zhuǎn)
    meta: { title: '費用管理'}, // 一級標題，寫了才能顯示在面包屑上
    children: [
        {
            path: '',
            component:{ render: (e) => e("router-view") }, // 如果你的'feeConfig'路徑已經(jīng)在系統(tǒng)菜單中設置過了，這里的path和component就寫得和我一樣就行，直接跳轉(zhuǎn)三級路由
            hidden: true, // false：顯示在側(cè)邊欄菜單
            redirect: 'noRedirect', // noRedirect：面包屑不可點擊，不寫這個，父級標題樣式就和首頁一樣，黑字可點擊跳轉(zhuǎn)
            meta: { title: '費用配置'}, // 二級標題，寫了才能顯示在面包屑上
            // 如果你不需要二級的父級標題，那你就直接把第二個children的內(nèi)容寫在第一個children就行
            children: [
              {
                path: 'feeConfig/feeConfigDetail',
                component: () => import('@/views/feeManage/feeConfigDetail/index'),
                name: 'feeConfigDetail',
                meta: { title: '費用配置', activeMenu: '/feeManage/feeConfig' } // meta.title：三級標題，meta.activeMenu：側(cè)邊欄父級菜單高亮
              }
            ]
        }
    ]
  }

也可以這樣寫（這樣寫是建立在之前寫的跳轉(zhuǎn)路徑不規(guī)范，如果不想改代碼那么多，只能自己在路由這里改，就不用動業(yè)務代碼里的跳轉(zhuǎn)路徑，當然我強迫癥，我最后都改了）

  {
    path: '',
    component: Layout,
    hidden: true,
    redirect: 'noRedirect',
    meta: { title: '運營中心' },
    children: [
        {
            path: '/overseas-collocation',
            component:{ render: (e) => e("router-view") }, // 如果你的'merchant'路徑已經(jīng)在系統(tǒng)菜單中設置過了，這里的path和component就寫得和我一樣就行，直接跳轉(zhuǎn)三級路由
            hidden: true, // false：顯示在側(cè)邊欄菜單
            redirect: 'noRedirect', // noRedirect：面包屑不可點擊，不寫這個，父級標題樣式就和首頁一樣，黑字可點擊跳轉(zhuǎn)
            meta: { title: '海外拼柜'}, // 二級標題，寫了才能顯示在面包屑上
            // 如果你不需要二級的父級標題，那你就直接把第二個children的內(nèi)容寫在第一個children就行
            children: [
                {
                  path: 'detail/:id(\\d+)',
                  component: () => import('@/views/operation-center/overseas-collocation/collocation-detail'),
                  name: 'overseasCollocationDetail',
                  meta: { title: '拼柜詳情', activeMenu: '/operation-center/overseas-collocation/overseas-collocation' }
                }
            ]
        }
    ]
  }

<router-link :to="'/overseas-collocation/detail/' + scope.row.id">
		<el-button type="text">查看</el-button>
</router-link>

改后

若依 <router-link :to=

若依 <router-link :to=

面包屑和標簽頁動態(tài)標題配置

配置完路由后，就要講，如何動態(tài)設置路由path不同參數(shù) 在頁面容器里打開新頁面，面包屑和標簽頁標題根據(jù)參數(shù)動態(tài)改變

?使用1方法創(chuàng)建好路由后，然后用$router.push設置傳的參數(shù)，我們使用metaTitle來當頁面標題

this.$router.push({
					path: '/feeManage/feeConfigDetail',
					query: {
						id: row.id,
						metaTitle: row.chargeName + '的費用配置'
					},
				})

如果你只做到了這里，你就會發(fā)現(xiàn)，它確實跳轉(zhuǎn)頁面了，但是它是同一個頁面進行了不同參數(shù)的刷新，然后頁面的標題也沒有動態(tài)改變，而是你之前菜單配置時寫的標題，如圖：

?? ? ? ? ? ? ? ? ? 若依 <router-link :to=

?下面就需要改改若依的源碼了：

1、先改面包屑

若依 <router-link :to=

若依 <router-link :to= ?2、在頁面容器中，打開新的標簽頁，改標簽頁標題（把要修改文件和修改內(nèi)容框出來，有個明顯的對比，知道改哪里）

若依 <router-link :to=

若依 <router-link :to= ?

若依 <router-link :to= ?最后在新頁面取出參數(shù)

若依 <router-link :to=

最后效果

若依 <router-link :to=

有bug

也是寫完上面的內(nèi)容以后，才發(fā)現(xiàn)有bug，路徑一樣，參數(shù)不一樣的標簽，去單擊的時候，沒有刷新內(nèi)容，而是保留第一次點擊的標簽的頁面。。。如圖

若依 <router-link :to=

bug解決

原因：若依vue前端源碼中用的<router-link>標簽進行頁面跳轉(zhuǎn)，因為路徑一樣，參數(shù)不一樣的頁面本質(zhì)上都是同一個vue，而這個vue已經(jīng)加載出來就不會進行銷毀重新加載了，所以我們要做的就是監(jiān)聽參數(shù)然后重新渲染，達到刷新頁面的效果

在自己的跳轉(zhuǎn)頁面vue中監(jiān)聽路由參數(shù)：

若依 <router-link :to=

二級路由效果

三級路由效果

若依 <router-link :to=

ps: 找到更好的寫法就又補充了一下，所以截圖上有些不統(tǒng)一，記得看字看描述哈！?

修改過的若依代碼

ruoyi 3.8.3

src\components\Breadcrumb\index.vue

若依 <router-link :to=

<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">
            <!-- {{ item.meta.title }} -->
            {{item.metaTitle ? item.metaTitle : item.meta.title  }}
        </span>
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith('/redirect/')) {
        return
      }
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      matched.forEach(element => {
          if(element.path == this.$route.path ) {
              if(this.$route.query.metaTitle) {
                    element.metaTitle = this.$route.query.metaTitle
               }
          } 
      });
      const first = matched[0]

      if (!this.isDashboard(first)) {
        matched = [{ path: '/index', meta: { title: '首頁' }}].concat(matched)
      }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim() === 'Index'
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>

src\layout\components\TagsView\index.vue

若依 <router-link :to=

若依 <router-link :to=

若依 <router-link :to= ?

<template>
  <div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link
        v-for="tag in visitedViews"
        ref="tag"
        :key="tag.fullPath"
        :class="isActive(tag)?'active':''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        tag="span"
        class="tags-view-item"
        :style="activeStyle(tag)"
        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
        @contextmenu.prevent.native="openMenu(tag,$event)"
      >
        {{ tag.title }}
        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新頁面</li>
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 關(guān)閉當前</li>
      <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 關(guān)閉其他</li>
      <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 關(guān)閉左側(cè)</li>
      <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 關(guān)閉右側(cè)</li>
      <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部關(guān)閉</li>
    </ul>
  </div>
</template>

<script>
import ScrollPane from './ScrollPane'
import path from 'path'

export default {
  components: { ScrollPane },
  data() {
    return {
      visible: false,
      top: 0,
      left: 0,
      selectedTag: {},
      affixTags: []
    }
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
    routes() {
      return this.$store.state.permission.routes
    },
    theme() {
      return this.$store.state.settings.theme;
    }
  },
  watch: {
    $route() {
      this.addTags()
      this.moveToCurrentTag()
    },
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  mounted() {
    this.initTags()
    this.addTags()
  },
  methods: {
    isActive(route) {
    //   return route.path === this.$route.path
      return route.fullPath === this.$route.fullPath
    },
    activeStyle(tag) {
      if (!this.isActive(tag)) return {};
      return {
        "background-color": this.theme,
        "border-color": this.theme
      };
    },
    isAffix(tag) {
      return tag.meta && tag.meta.affix
    },
    isFirstView() {
      try {
        return this.selectedTag.fullPath === this.visitedViews[1].fullPath || this.selectedTag.fullPath === '/index'
      } catch (err) {
        return false
      }
    },
    isLastView() {
      try {
        return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath
      } catch (err) {
        return false
      }
    },
    filterAffixTags(routes, basePath = '/') {
      let tags = []
      routes.forEach(route => {
        if (route.meta && route.meta.affix) {
          const tagPath = path.resolve(basePath, route.path)
          tags.push({
            fullPath: tagPath,
            path: tagPath,
            name: route.name,
            meta: { ...route.meta }
          })
        }
        if (route.children) {
          const tempTags = this.filterAffixTags(route.children, route.path)
          if (tempTags.length >= 1) {
            tags = [...tags, ...tempTags]
          }
        }
      })
      return tags
    },
    initTags() {
      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
      for (const tag of affixTags) {
        // Must have tag name
        if (tag.name) {
        //   this.$store.dispatch('tagsView/addVisitedView', tag)
        }
      }
    },
    addTags() {
      const { name } = this.$route
      if (name) {
        this.$store.dispatch('tagsView/addView', this.$route)
      }
      return false
    },
    moveToCurrentTag() {
      const tags = this.$refs.tag
      this.$nextTick(() => {
        for (const tag of tags) {
          if (tag.to.path === this.$route.path) {
              if(tag.to.query.metaTitle) {
                  if(tag.to.query.metaTitle === this.$route.query.metaTitle) {
                      this.$refs.scrollPane.moveToTarget(tag)
                       // when query is different then update
                      if (tag.to.fullPath !== this.$route.fullPath) {
                        this.$store.dispatch('tagsView/updateVisitedView', this.$route)
                      }
                  }
              } else {
                  this.$refs.scrollPane.moveToTarget(tag)
                  // when query is different then update
                  if (tag.to.fullPath !== this.$route.fullPath) {
                    this.$store.dispatch('tagsView/updateVisitedView', this.$route)
                  }
              }
            break
          }
        }
      })
    },
    refreshSelectedTag(view) {
      this.$tab.refreshPage(view);
    },
    closeSelectedTag(view) {
      this.$tab.closePage(view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
          this.toLastView(visitedViews, view)
        }
      })
    },
    closeRightTags() {
      this.$tab.closeRightPage(this.selectedTag).then(visitedViews => {
        if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) {
          this.toLastView(visitedViews)
        }
      })
    },
    closeLeftTags() {
      this.$tab.closeLeftPage(this.selectedTag).then(visitedViews => {
        if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) {
          this.toLastView(visitedViews)
        }
      })
    },
    closeOthersTags() {
      this.$router.push(this.selectedTag).catch(()=>{});
      this.$tab.closeOtherPage(this.selectedTag).then(() => {
        this.moveToCurrentTag()
      })
    },
    closeAllTags(view) {
      this.$tab.closeAllPage().then(({ visitedViews }) => {
        if (this.affixTags.some(tag => tag.path === this.$route.path)) {
          return
        }
        this.toLastView(visitedViews, view)
      })
    },
    toLastView(visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      if (latestView) {
        this.$router.push(latestView.fullPath)
      } else {
        // now the default is to redirect to the home page if there is no tags-view,
        // you can adjust it according to your needs.
        if (view.name === 'Dashboard') {
          // to reload home page
          this.$router.replace({ path: '/redirect' + view.fullPath })
        } else {
          this.$router.push('/')
        }
      }
    },
    openMenu(tag, e) {
      const menuMinWidth = 105
      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
      const offsetWidth = this.$el.offsetWidth // container width
      const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.clientX - offsetLeft + 15 // 15: margin right

      if (left > maxLeft) {
        this.left = maxLeft
      } else {
        this.left = left
      }

      this.top = e.clientY
      this.visible = true
      this.selectedTag = tag
    },
    closeMenu() {
      this.visible = false
    },
    handleScroll() {
      this.closeMenu()
    }
  }
}
</script>

<style lang="scss" scoped>
.tags-view-container {
  height: 34px;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  .tags-view-wrapper {
    .tags-view-item {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 26px;
      line-height: 26px;
      border: 1px solid #d8dce5;
      color: #495060;
      background: #fff;
      padding: 0 8px;
      font-size: 12px;
      margin-left: 5px;
      margin-top: 4px;
      &:first-of-type {
        margin-left: 15px;
      }
      &:last-of-type {
        margin-right: 15px;
      }
      &.active {
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
        &::before {
          content: '';
          background: #fff;
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          position: relative;
          margin-right: 2px;
        }
      }
    }
  }
  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    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);
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }
}
</style>

<style lang="scss">
//reset element css of el-icon-close
.tags-view-wrapper {
  .tags-view-item {
    .el-icon-close {
      width: 16px;
      height: 16px;
      vertical-align: 2px;
      border-radius: 50%;
      text-align: center;
      transition: all .3s cubic-bezier(.645, .045, .355, 1);
      transform-origin: 100% 50%;
      &:before {
        transform: scale(.6);
        display: inline-block;
        vertical-align: -3px;
      }
      &:hover {
        background-color: #b4bccc;
        color: #fff;
      }
    }
  }
}
</style>

src\store\modules\tagsView.js

若依 <router-link :to= 文章來源地址http://www.zghlxwxcb.cn/news/detail-792366.html

const state = {
  visitedViews: [],
  cachedViews: []
}

const mutations = {
//   ADD_VISITED_VIEW: (state, view) => {
//     if (state.visitedViews.some(v => v.path === view.path)) return
//     state.visitedViews.push(
//       Object.assign({}, view, {
//         title: view.meta.title || 'no-name'
//       })
//     )
//   },
  ADD_VISITED_VIEW: (state, view) => {
    if (state.visitedViews.some(v => v.path === view.path)) {
        // 路徑一樣，因為參數(shù)不同，打開新的頁面
        if(view.query && view.query.metaTitle) {
            let list = state.visitedViews.filter(v => v.query && v.query.metaTitle && v.query.metaTitle == view.query.metaTitle)
            if(list.length > 0) {
                return
            }
        } else {
            return
        }
    } 
    state.visitedViews.push(
      Object.assign({}, view, {
        title: view.query && view.query.metaTitle ? view.query.metaTitle:(view.meta.title || 'no-name')
      })
    )
  },
  ADD_CACHED_VIEW: (state, view) => {
    if (state.cachedViews.includes(view.name)) return
    if (view.meta && !view.meta.noCache) {
      state.cachedViews.push(view.name)
    }
  },

  DEL_VISITED_VIEW: (state, view) => {
    for (const [i, v] of state.visitedViews.entries()) {
      if (v.path === view.path) {
        state.visitedViews.splice(i, 1)
        break
      }
    }
  },
  DEL_CACHED_VIEW: (state, view) => {
    const index = state.cachedViews.indexOf(view.name)
    index > -1 && state.cachedViews.splice(index, 1)
  },

  DEL_OTHERS_VISITED_VIEWS: (state, view) => {
    state.visitedViews = state.visitedViews.filter(v => {
      return v.meta.affix || v.path === view.path
    })
  },
  DEL_OTHERS_CACHED_VIEWS: (state, view) => {
    const index = state.cachedViews.indexOf(view.name)
    if (index > -1) {
      state.cachedViews = state.cachedViews.slice(index, index + 1)
    } else {
      state.cachedViews = []
    }
  },

  DEL_ALL_VISITED_VIEWS: state => {
    // keep affix tags
    const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
    state.visitedViews = affixTags
  },
  DEL_ALL_CACHED_VIEWS: state => {
    state.cachedViews = []
  },

  UPDATE_VISITED_VIEW: (state, view) => {
    for (let v of state.visitedViews) {
      if (v.path === view.path) {
        v = Object.assign(v, view)
        break
      }
    }
  },
  
  DEL_RIGHT_VIEWS: (state, view) => {
    const index = state.visitedViews.findIndex(v => v.path === view.path)
    if (index === -1) {
      return
    }
    state.visitedViews = state.visitedViews.filter((item, idx) => {
      if (idx <= index || (item.meta && item.meta.affix)) {
        return true
      }
      const i = state.cachedViews.indexOf(item.name)
      if (i > -1) {
        state.cachedViews.splice(i, 1)
      }
      return false
    })
  },

  DEL_LEFT_VIEWS: (state, view) => {
    const index = state.visitedViews.findIndex(v => v.path === view.path)
    if (index === -1) {
      return
    }
    state.visitedViews = state.visitedViews.filter((item, idx) => {
      if (idx >= index || (item.meta && item.meta.affix)) {
        return true
      }
      const i = state.cachedViews.indexOf(item.name)
      if (i > -1) {
        state.cachedViews.splice(i, 1)
      }
      return false
    })
  }
}

const actions = {
  addView({ dispatch }, view) {
    dispatch('addVisitedView', view)
    dispatch('addCachedView', view)
  },
  addVisitedView({ commit }, view) {
    commit('ADD_VISITED_VIEW', view)
  },
  addCachedView({ commit }, view) {
    commit('ADD_CACHED_VIEW', view)
  },

  delView({ dispatch, state }, view) {
    return new Promise(resolve => {
      dispatch('delVisitedView', view)
      dispatch('delCachedView', view)
      resolve({
        visitedViews: [...state.visitedViews],
        cachedViews: [...state.cachedViews]
      })
    })
  },
  delVisitedView({ commit, state }, view) {
    return new Promise(resolve => {
      commit('DEL_VISITED_VIEW', view)
      resolve([...state.visitedViews])
    })
  },
  delCachedView({ commit, state }, view) {
    return new Promise(resolve => {
      commit('DEL_CACHED_VIEW', view)
      resolve([...state.cachedViews])
    })
  },

  delOthersViews({ dispatch, state }, view) {
    return new Promise(resolve => {
      dispatch('delOthersVisitedViews', view)
      dispatch('delOthersCachedViews', view)
      resolve({
        visitedViews: [...state.visitedViews],
        cachedViews: [...state.cachedViews]
      })
    })
  },
  delOthersVisitedViews({ commit, state }, view) {
    return new Promise(resolve => {
      commit('DEL_OTHERS_VISITED_VIEWS', view)
      resolve([...state.visitedViews])
    })
  },
  delOthersCachedViews({ commit, state }, view) {
    return new Promise(resolve => {
      commit('DEL_OTHERS_CACHED_VIEWS', view)
      resolve([...state.cachedViews])
    })
  },

  delAllViews({ dispatch, state }, view) {
    return new Promise(resolve => {
      dispatch('delAllVisitedViews', view)
      dispatch('delAllCachedViews', view)
      resolve({
        visitedViews: [...state.visitedViews],
        cachedViews: [...state.cachedViews]
      })
    })
  },
  delAllVisitedViews({ commit, state }) {
    return new Promise(resolve => {
      commit('DEL_ALL_VISITED_VIEWS')
      resolve([...state.visitedViews])
    })
  },
  delAllCachedViews({ commit, state }) {
    return new Promise(resolve => {
      commit('DEL_ALL_CACHED_VIEWS')
      resolve([...state.cachedViews])
    })
  },

  updateVisitedView({ commit }, view) {
    commit('UPDATE_VISITED_VIEW', view)
  },

  delRightTags({ commit }, view) {
    return new Promise(resolve => {
      commit('DEL_RIGHT_VIEWS', view)
      resolve([...state.visitedViews])
    })
  },

  delLeftTags({ commit }, view) {
    return new Promise(resolve => {
      commit('DEL_LEFT_VIEWS', view)
      resolve([...state.visitedViews])
    })
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

到了這里，關(guān)于若依 vue前端動態(tài)設置路由path不同參數(shù) 在頁面容器里打開新頁面（新路由），面包屑和標簽頁標題根據(jù)參數(shù)動態(tài)改變，面包屑多級標題，側(cè)邊欄對應菜單亮起的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權(quán)，不承擔相關(guān)法律責任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務器費用

vue3 中動態(tài)添加路由出現(xiàn)的問題 [Vue Router warn]: No match found for location with path “xxx“
最近想嘗試 vue3 + elementplus + axios + pinia 封裝一個通用的后臺模板，寫到 vue-router 添加動態(tài)路由時，有一個不影響代碼運行但是又有提示的報錯，因此進行記錄，方便大家進行解決圖片圈出的路由是動態(tài)加載的路由 404等報錯頁面不再需要放在所有路由后面，可在一開始的時候
2024年02月09日
瀏覽(25)
前端之vue 根據(jù)菜單自動生成路由（動態(tài)配置前端路由）
在需要權(quán)限控制的頁面，往往存在根據(jù)用戶來顯示菜單的情況，單獨根據(jù)用戶類型判斷顯然不是很好，如果后面用戶類型發(fā)生變化，項目修改維護可能就會比較麻煩，所以比較好的做法是根據(jù)后端返回的菜單動態(tài)生成頁面路由，以達到完全權(quán)限控制的目的，并且若權(quán)限發(fā)生變
2024年04月10日
瀏覽(28)
（vue權(quán)限管理）前端路由表角色權(quán)限管理，通過登錄不同角色側(cè)邊欄顯示對應頁面
1. 首先在src/router/index.js中添加路由表，其中constantRoutes 設置的為所有角色可見的路由，asyncRouterMap為對應權(quán)限人員可見路由，demo路由表代碼如下: 2.在src/api/user.js中創(chuàng)建用戶登錄，獲取用戶信息，以及登出的接口 3.在store/modules/user.js文件，添加獲取角色權(quán)限r(nóng)ole的信息 4.在src
2024年02月11日
瀏覽(23)
[VUE學習]權(quán)限管理系統(tǒng)前端vue實現(xiàn)9-動態(tài)路由，動態(tài)標簽頁，動態(tài)面包屑
? ? ? ? ? ? ? ? 在總體布局頁面添加router router-view 是 Vue Router 提供的組件，用于動態(tài)展示匹配到的路由組件內(nèi)容。通過在合適的位置放置 router-view ，你可以根據(jù)路由路徑動態(tài)地渲染對應的組件內(nèi)容。 ? ? ? ? ? ? ? ? ? ? 因為我們是多級頁面之后動態(tài)路由也是多級的如
2024年02月13日
瀏覽(22)
Vue2路由：手動配置使用路由&路由嵌套、路由動態(tài)傳參（:參數(shù)，query、props）、編程式導航（back、go）、導航守衛(wèi)
過了一遍vue2的router，整理一下小結(jié) 目錄一、前端路由的概念與原理 1.1 什么是路由 1.2 路由的工作方式二、vue-router的基本使用 2.1 安裝、配置、使用router 2.2 redirect重定向三、嵌套路由 3.1 聲明子路由的規(guī)則 3.2 默認子路由四、動態(tài)路由 4.1 動態(tài)路由的概念 4.2 動態(tài)路由取參方
2024年02月05日
瀏覽(24)
若依框架（ruoyi）路由配置菜單配置動態(tài)路由
若依框架（ruoyi）后臺路由配置菜單配置動態(tài)路由: 路由全部是在菜單管理里面配置: ? 類目: ? ? 公共路由: 網(wǎng)址: /activiti/reviewTasks/review/party_org/123 每一條地址:? http://localhost/activiti/reviewTasks/review/party_political_talk/249 ? ? ?
2024年02月11日
瀏覽(28)
springcloud gateway 配置predicates 多個path；路由請求頭新增參數(shù)
一、在一個微服務節(jié)點的predicates下配置多個path： - Path=/test/batis/test,/test/testJmeter，具體配置如下：二、在請求頭中新增header參數(shù)，yml文件配置如下：三、自定義filter中新增請求頭參數(shù)：
2024年02月16日
瀏覽(27)
vue-element-admin vue設置動態(tài)路由刷新頁面后出現(xiàn)跳轉(zhuǎn)404頁面Bug 解決方法
做項目時遇到的這個bug，因為除了跳404之外也沒太大影響，之前就一直放著沒管，現(xiàn)在項目基本功能實現(xiàn)了，轉(zhuǎn)頭處理了一下，現(xiàn)在在這里記錄一下解決方法這個bug的具體情況是：設置了動態(tài)路由之后，不同的用戶登錄之后顯示了不同的側(cè)邊欄，在側(cè)邊欄點擊菜單，渲染對應
2024年04月28日
瀏覽(95)
Vue3+Vue-Router+Element-Plus根據(jù)后端數(shù)據(jù)實現(xiàn)前端動態(tài)路由——權(quán)限管理模塊
提示：文章內(nèi)容仔細看一些，或者直接粘貼復制，效果滿滿提示：文章大概 1、項目：前后端分離 2、前端：基于Vite創(chuàng)建的Vue3項目 3、后端：沒有，模擬的后端數(shù)據(jù) 4、關(guān)于路徑“@”符號——vite.config.js 文件里修改提示：以下是本篇文章正文內(nèi)容，下面案例可供復制粘貼使用
2024年02月02日
瀏覽(123)
若依：如何去掉首頁，設置登錄后跳轉(zhuǎn)到第一個路由菜單
若依系統(tǒng)是一個很好用的，開源的前端后臺管理系統(tǒng)。最近公司有一個需求，需要把默認的首頁隱藏，登錄后直接跳轉(zhuǎn)到路由菜單返回的第一個頁面。查找了不少資料，但是都沒有實際的解決方案。 ?不過最好自己還是實現(xiàn)了這個功能。步驟如下： 1、首先應當找到項目里
2023年04月09日
瀏覽(155)