javascript - Vue 在路由器 View 中相同组件之间切换将不会再次安装/创建

Question

当使用相同的组件时，例如 User.vue 的两个版本仅数据不同，因此在它们之间切换时，不会使用 vue 中的created或mounted生命周期函数。

我的意思是:

<小时/>

但是，当我切换到其他组件时，在我的例子中 Welcome.vue页面，然后然后切换回我的 User.vue 之一组件，它按其应有的方式工作。在这种情况下 User.vue组件将使用自己创建的函数并从我的商店重新加载用户相关数据。

示例:

<小时/>

正如您所看到的，该组件将被重新渲染并按其应有的方式加载其相关的用户数据。

我的User.vue组件

<template>
  <div>
    <UserInfo
      :user-name="userName"
      :budget="budget"
    />
    <UserIncExp />
  </div>
</template>

<script>
import UserInfo from '../User/UserInfo.vue';
import UserIncExp from '../User/UserIncExp/_UserIncExp.vue';
export default {
  components: {
    UserInfo,
    UserIncExp
  },
  data() {
    return {
      userName: '',
      budget: ''
    };
  },
  computed: {

  },
  watch: {
    '$route.params.id': id => {
      console.log(id);
      this.loadUserDataFromState();
    }
    // this.userName = this.$store.state.users[this.$attrs.userId].userName;
    // console.log(this.userId);
  },
  created: function() {
    this.loadUserDataFromState();
  },
  methods: {
    loadUserDataFromState() {
      console.log('route changed');
      this.userName = this.$store.state.users[this.$attrs.userId].userName;
      this.budget = this.$store.state.users[this.$attrs.userId].salery;
      console.log(this.userName);
      console.log(this.budget);
    }
  },
};
</script>

<style>
</style>

User.vue从 store.state 获取他的数据，如下所示:

  state: {
    users: [
      // {
      //   userName: 'John',
      //   salary: 2000,
      //   leftover: 0,
      //   inc: [],
      //   exp: [],
      //   active: false,
      // }
    ],
    // placeholder: true
  },

父级是 App.vue与二手<router-link>对于用户。

<template>
  <div id="app">
    <Navigation />
    <router-view />
  </div>
</template>

<script>
// import { mapState } from 'vuex';
import Navigation from './components/Navigation/_Navigation.vue';
export default {
  components: {
    Navigation
  },
  computed: {}
};
</script>

<style lang="scss">
#app {
  height: 1200px;
  width: 100vw;
  background-color: $dark;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ffffff;
  a:hover {
    color: $orange;
  }
  a {
    color: $white;
  }
  *:focus {
    box-shadow: 0 0 0 0.2rem rgba(233, 84, 32, 0) !important;
  }
}
</style>

最后是我的路由器配置，如果您需要的话

import Vue from 'vue';
import VueRouter from 'vue-router';
import Welcome from '../views/Welcome.vue';
import User from '../components/User/_User.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Welcome',
    component: Welcome
  },
  {
    path: '/user/:userId',
    name: 'User',
    component: User,
    props: true
  }
];

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

Answer 1

您正在观看 $route.params.id 而不是 $route.params.userId，因为在路由器配置中您已将参数添加为 /user/:用户ID

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();
 }
},