Javascript 不会再次安装/创建路由器视图中相同组件之间的Vue切换

当使用相同的组件时，例如两个版本的User.vue，它们只在数据中不同，然后在这些组件之间切换时，vue中将不会使用已创建或已装载的生命周期功能

我的意思是：

但是，当我切换到另一个组件（在我的例子中是Welcome.vue页面），然后切换回我的User.vuecomponents之一时，它会正常工作。在这种情况下，User.vue组件将使用自己创建的函数，并从我的应用商店重新加载与用户相关的数据

例如：

正如您所看到的，组件将被重新渲染，并像应该的那样加载其相关的用户数据

my User.vue组件

从“../User/UserInfo.vue”导入用户信息； 从“../User/userincesxp/_userincesxp.vue”导入userincesxp； 导出默认值{ 组成部分：{ 用户信息， UserIncExp }, 资料{ 返回{ 用户名：， 预算： }; }, 计算：{ }, 观察：{ “$route.params.id”：id=>{ console.logid； this.loadUserDataFromState； } //this.userName=this.$store.state.users[this.$attrs.userId].userName； //console.logthis.userId； }, 创建：函数{ this.loadUserDataFromState； }, 方法：{ loadUserDataFromState{ 控制台。记录“路线更改”； this.userName=this.$store.state.users[this.$attrs.userId].userName； this.budget=this.$store.state.users[this.$attrs.userId].salery； console.logthis.userName； console.logthis.budget； } }, }; User.vue从store.state获取数据，如下所示：

声明：{ 用户：[ // { //用户名：“John”， //薪金：2000， //剩余：0， //股份有限公司：[]， //exp:[]， //活动：错误， // } ], //占位符：true }, 父级为App.vue，带有用于用户的

//从“vuex”导入{mapState}； 从“./components/Navigation/_Navigation.vue”导入导航； 导出默认值{ 组成部分：{ 航行 }, 计算：{} }; 应用程序{ 高度：1200px； 宽度：100vw； 背景色：$深色； 字体系列：“Avenir”、Helvetica、Arial、无衬线字体； -webkit字体平滑：抗锯齿； -moz osx字体平滑：灰度； 颜色：ffffff； a:悬停{ 颜色：$橙色； } a{ 颜色：$白色； } *：焦点{ 盒影：0.2rem rgba233,84,32,0！重要； } } 最后是我的路由器配置，如果你需要的话

从“Vue”导入Vue； 从“vue路由器”导入VueRouter； 从“../views/Welcome.vue”导入欢迎； 从“../components/User/_User.vue”导入用户； Vue.useVueRouter； 常数路由=[ { 路径：“/”， 姓名：'欢迎'， 组成部分：欢迎 }, { 路径：'/user/：userId'， 名称：“用户”， 组件：用户， 道具：真的 } ]; 常量路由器=新的VueRouter{ //模式：“历史”， base:process.env.base\u URL， 路线 }; 导出默认路由器； 您正在监视$route.params.id，而不是$route.params.userId，因为在路由器配置中，您添加了param as/user/：userId

您正在监视$route.params.id，而不是$route.params.userId，因为在路由器配置中，您添加了param as/user/：userId

---

同时看一看：也看一看：最初，当我从Welcome.vue来时，数据没有加载，所以我创建了this.loadUserDataFromState，以便在从User.vue到User.vue的其他路径来时加载，但在您的帮助下，它现在可以工作了。您能告诉我有关处理程序的信息吗？这是从哪里来的，文档中的ref在哪里？当然，文档来了，Vue中的不同监视方式：最初，当我从Welcome.Vue来时，数据没有加载，所以我创建了this.loadUserDataFromState，以便在从User.Vue到User.Vue的其他路径来时加载，但在您的帮助下，它现在可以工作了。您能告诉我有关处理程序的信息吗？这是从哪里来的？文档中的ref在哪里？当然，文档在这里，Vue中的不同观看方式：

watch: {
  "$route.params.userId": { // <-- here 
    handler () {
      this.loadUserDataFromState();
    },
    immediate: true // will call handler on component mount / create as well, so no need to call fn on mounted again
    }
  },

beforeRouteUpdate (to, from, next) {
 if (from.name === to.name) { // Call fn only when: route hasn't changed instead just query/params for the route has changed
  this.loadUserDataFromState();
 }
},