当前位置: article > 正文

若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起_若依路由参数怎么使用

作者：我家自动化 | 2024-04-11 00:35:32

踩

若依路由参数怎么使用

前言

因为是在vue源码的基础上进行修改，所以，就没有复制代码在文章上，采取的是截图对比源码和我修改的代码片段。要麻烦你们自己手敲了。

先来看看效果：

场景：在费用配置列表中，点击每一项的配置，都会在页面容器内部打开一个新页面，所以新页面的路径一样，根据传的参数不同，面包屑和标签页标题动态改变

二级路由效果（这是用菜单管理新建一条隐藏的路由做法，不推荐）


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

三级路由效果（推荐）

路由跳转方法：


// 方法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>点击跳转</span>
</router-link>

若依路由简单介绍：

若依vue前端能跳转到新页面路由的方法，我暂且知道这三种形式：

1 在若依的菜单项添加（不推荐）

缺点：因为路由暴露在外面，会发生被误删或者修改错误的情况，造成严重缺陷。

优点：不用写路由配置的代码，可以直接进行路由跳转了。

同时还要注意，这是详细页面，不应该在左侧菜单栏出现，所以要隐藏

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

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

若依字典管理的动态路由配置（如果是想实现像若依字典这样的路由跳转效果，就可以直接参考若依的源码去做：

如果需要权限，需要自己写权限标识（很麻烦，，对接很累）

先是后端写上。。。

然后前端。。。

代码实现

路由配置

实现三级标题的路由怎么写？


{
    path: '/feeManage',
    component: Layout, // 一级这个component: Layout必填，除非是不需要在页面容器里打开的页面
    hidden: true, // false：显示在侧边栏菜单
    redirect: 'noRedirect', // noRedirect：面包屑不可点击，不写这个，父级标题样式就和首页一样，黑字可点击跳转
    meta: { title: '费用管理'}, // 一级标题，写了才能显示在面包屑上
    children: [
        {
            path: '',
            component:{ render: (e) => e("router-view") }, // 如果你的'feeConfig'路径已经在系统菜单中设置过了，这里的path和component就写得和我一样就行，直接跳转三级路由
            hidden: true, // false：显示在侧边栏菜单
            redirect: 'noRedirect', // noRedirect：面包屑不可点击，不写这个，父级标题样式就和首页一样，黑字可点击跳转
            meta: { title: '费用配置'}, // 二级标题，写了才能显示在面包屑上
            // 如果你不需要二级的父级标题，那你就直接把第二个children的内容写在第一个children就行
            children: [
              {
                path: 'feeConfig/feeConfigDetail',
                component: () => import('@/views/feeManage/feeConfigDetail/index'),
                name: 'feeConfigDetail',
                meta: { title: '费用配置', activeMenu: '/feeManage/feeConfig' } // meta.title：三级标题，meta.activeMenu：侧边栏父级菜单高亮
              }
            ]
        }
    ]
  }

也可以这样写（这样写是建立在之前写的跳转路径不规范，如果不想改代码那么多，只能自己在路由这里改，就不用动业务代码里的跳转路径，当然我强迫症，我最后都改了）


  {
    path: '',
    component: Layout,
    hidden: true,
    redirect: 'noRedirect',
    meta: { title: '运营中心' },
    children: [
        {
            path: '/overseas-collocation',
            component:{ render: (e) => e("router-view") }, // 如果你的'merchant'路径已经在系统菜单中设置过了，这里的path和component就写得和我一样就行，直接跳转三级路由
            hidden: true, // false：显示在侧边栏菜单
            redirect: 'noRedirect', // noRedirect：面包屑不可点击，不写这个，父级标题样式就和首页一样，黑字可点击跳转
            meta: { title: '海外拼柜'}, // 二级标题，写了才能显示在面包屑上
            // 如果你不需要二级的父级标题，那你就直接把第二个children的内容写在第一个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>

改后

面包屑和标签页动态标题配置

配置完路由后，就要讲，如何动态设置路由path不同参数在页面容器里打开新页面，面包屑和标签页标题根据参数动态改变

使用1方法创建好路由后，然后用$router.push设置传的参数，我们使用metaTitle来当页面标题


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

如果你只做到了这里，你就会发现，它确实跳转页面了，但是它是同一个页面进行了不同参数的刷新，然后页面的标题也没有动态改变，而是你之前菜单配置时写的标题，如图：

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

1、先改面包屑

2、在页面容器中，打开新的标签页，改标签页标题（把要修改文件和修改内容框出来，有个明显的对比，知道改哪里）

最后在新页面取出参数

最后效果

有bug

也是写完上面的内容以后，才发现有bug，路径一样，参数不一样的标签，去单击的时候，没有刷新内容，而是保留第一次点击的标签的页面。。。如图

bug解决

原因：若依vue前端源码中用的<router-link>标签进行页面跳转，因为路径一样，参数不一样的页面本质上都是同一个vue，而这个vue已经加载出来就不会进行销毁重新加载了，所以我们要做的就是监听参数然后重新渲染，达到刷新页面的效果

在自己的跳转页面vue中监听路由参数：

二级路由效果

三级路由效果

ps: 找到更好的写法就又补充了一下，所以截图上有些不统一，记得看字看描述哈！

修改过的若依代码

ruoyi 3.8.3

src\components\Breadcrumb\index.vue


<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


<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> 关闭当前</li>
      <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li>
      <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li>
      <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li>
      <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</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


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)) {
        // 路径一样，因为参数不同，打开新的页面
        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
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/401889

若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起_若依路由参数怎么使用

前言