问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue标签页，如何只切换当前点击的标签？

头像
年轻有为的红薯
    153

    image.png
    初始只有一个标签，点击+号，会新增一个标签，跳转到首页，再点击左侧菜单，只切换当前点击的标签，第一个标签还是点击+号之前的最后一个路由

    [MUTATION_CORE_UPDATE_VIEW]: (state, view) => {
    console.log(state.visitedViews.some(v => v.path === view.path), state.visitedViews,state.cachedViews)
    if (state.visitedViews.some(v => v.path === view.path)) return
 
    for (let v of state.visitedViews) {
      // console.log(state.visitedViews, v,v.fullPath , view.path);
      if (v.path !== view.path) {
        v = Object.assign(v, view)
        break
      } 
    }

  },

    现在的结果是，点击+号会新增一个标签，点击新增的标签，再点击左侧菜单切换页面，他自己又跳转到第一个标签页了

    vue.js
    阅读 1.4k
    avatarAI BotBETA

    在你的问题描述和代码示例中，你遇到的问题是在尝试更新 Vue 路由标签页状态时，错误地修改了 state.visitedViews 数组中的对象，而不是添加新的视图或更新当前活动的视图。你的代码尝试在 state.visitedViews 中找到与 view.path 不匹配的视图并更新它，这是不正确的逻辑，因为你应该只更新当前活动的视图或添加新视图到数组中。

    首先，确保你的 state.visitedViews 数组是用来存储用户访问过的视图（页面）的列表，每个视图都应该是一个唯一的对象，通常包含 path 和其他可能的属性（如 title、fullPath 等）。

    为了修复你的问题，你应该在 MUTATION_CORE_UPDATE_VIEW 突变（mutation）中做以下事情：

    1. 检查视图是否已存在：如果视图已存在于 visitedViews 中，则不需要做任何操作（或者你可以更新它的 meta 信息，如标题等，但这取决于你的具体需求）。
    2. 如果视图不存在：你应该将这个新的视图对象添加到 visitedViews 数组中，并且可能需要更新其他状态（如 activeView，假设你有一个状态来跟踪当前活动的视图）。

    这里是一个简化的示例，展示如何实现这一点：

    [MUTATION_CORE_UPDATE_VIEW]: (state, view) => {
    // 检查视图是否已存在
    if (!state.visitedViews.some(v => v.path === view.path)) {
        // 如果不存在，则添加到 visitedViews
        state.visitedViews.push(view);

        // 如果需要，更新 activeView 或其他相关状态
        // 例如，如果你希望新添加的视图成为当前活动的视图
        // state.activeView = view; // 假设你有一个 activeView 状态
    }
    // 注意：如果视图已存在，则不需要进行任何更新
    // 因为通常我们不希望覆盖用户之前访问过的视图的完整状态
},

    注意：你的原始代码尝试在找到不匹配的视图时更新它，这通常不是期望的行为，因为它会破坏 visitedViews 数组中已存在的其他视图的状态。你应该只添加新视图或更新特定于当前操作的状态（如 activeView）。

    另外，请确保你的路由守卫或页面跳转逻辑不会意外地重置或改变当前活动的视图状态。如果你的应用使用了 Vue Router，确保你正确地使用了 router-view 和 router-link，以及可能的路由守卫（如 beforeEach 和 beforeLeave）来管理视图的显示和隐藏。

    1 个回答
    得票最新
    头像
    年轻有为的红薯
      153
      ✓ 已被采纳
      [MUTATION_CORE_UPDATE_VIEW]: (state, view) => {
    if (state.visitedViews.some(v => v.path === view.path)) return
    let index = state.visitedViews[state.visitedViews.length - 1]
    index = Object.assign(index, view)
  },
      查看全部 1 个回答
      推荐问题
      宣传栏