Question

我有一个页面从URL路径继承activeTab路由参数。因此，在我的页面上，我可以导航到/home/并在主页标签中加载，或者在/somethingElse我可以加载到页面模板的标签视口中的其他标签页。

要更新标签，我正在使用：

updateTab(tab) {
  this.activeTab = tab
  this.$router.push(tab)
}

当我这样做时，我在屏幕上闪烁，我的mounted()函数在每个组件上重新执行，触发一个只应在应用程序的第一个入口点触发的动画。

这更接近于所需的行为，其中标签发生变化，我没有得到组件的闪烁或重新安装：

updateTab(tab) {
  this.activeTab = tab
  history.pushState({}, '', tab)
}

但是，将activeTab直接推入历史记录似乎会阻止“后退”按钮正确恢复之前的状态。

如何在不重新安装所有组件的情况下更新Vue路由器的路径？

Answer 1

这不是预期的行为。不更改的组件不应重新执行挂载的挂钩。

我会在vue组件层次结构的顶部搜索问题，因为它听起来像其他一些代码可能会强制重新呈现层次结构。

Answer 2

当路由器的路径发生变化时，组件将再次安装，如果您只想安装一次组件，可以尝试使用Vue的内置组件 keep-alive ，它只会触发它的激活钩子和停用的钩子。你可以在这两个钩子里做点什么。

html：

<div id="app">
      <router-link to="/link-one">link-one</router-link>
      <router-link to="/link-two">link-two</router-link>
       <keep-alive>
         <router-view>

         </router-view>
       </keep-alive>
 </div>

javascript：

Vue.use(VueRouter);
        function createLink(path) {
            let routePath = '/' + path;
            return {
                path: routePath,
                component: {
                    name: path,
                    template: '<span>{{path}} mountedTimes:{{mountedTimes}}, activatedTimes: {{activatedTimes}}</span>',
                    data() {
                        return {
                            mountedTimes: 0,
                            activatedTimes: 0,
                            path: routePath
                        }
                    },
                    mounted() {
                      console.log('mounted')
                        this.mountedTimes++;
                    },
                    activated() {
                        this.activatedTimes++;
                    }
                }
            }
        }
        const routes = [createLink('link-one'), createLink('link-two')];
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            el: "#app",
            router
        })

CodePen

更新Vue路由器而不重新安装组件？

2 个答案: