Javascript 如何在Vue中使用参数作为道具传递用户Id？

我们到了： 我有一个登录视图。用户将登录。在他登录之后，我将获得UserID并使用道具将其传递给下一个视图（组件）

Login.Vue

.then(res => {if (res.status === 200){
                console.log(res.data['id'])
                this.$router.push({name:'Contact', params:{userID: res.data['id'] }}) }
            })

export default {
    name: "contact",
    props:["userID"],
    data() {
        return {
            UserID: this.$route.params.userID,
           
        };
    },

.then(res => {
 if (res.status === 200) {
  console.log(res.data['id'])
  this.$router.push({ name:'Contact' })
  
  localStorage.setItem('user_id', res.data['id']);
 }
})

export default {
 name: 'Contact',

 data() {
  return {
   UserId: localStorage.getItem('user_id');
  };
 },
}

联系人.vue

.then(res => {if (res.status === 200){
                console.log(res.data['id'])
                this.$router.push({name:'Contact', params:{userID: res.data['id'] }}) }
            })

export default {
    name: "contact",
    props:["userID"],
    data() {
        return {
            UserID: this.$route.params.userID,
           
        };
    },

.then(res => {
 if (res.status === 200) {
  console.log(res.data['id'])
  this.$router.push({ name:'Contact' })
  
  localStorage.setItem('user_id', res.data['id']);
 }
})

export default {
 name: 'Contact',

 data() {
  return {
   UserId: localStorage.getItem('user_id');
  };
 },
}

我将在登录后获取用户ID，如下所示：

但是，重新加载或刷新页面时，用户ID将丢失：

那么，当页面被重新加载时，我如何保存它呢

更新：：

路由器->index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import Contact from "../views/Contact.vue";

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        name: "Login",
        component: Login,
        props: true
    },
    {
        path: "/register",
        name: "Register",
        component: Register
    },

    {
        path: "/contact",
        name: "Contact",
        component: Contact,
        props: true
    }
];

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

export default router;

Contact.vue组件：

---

好吧，当您尝试登录到登录页面时，您只获得了一次用户数据，但没有将其保存在正确的位置。只需在从API获取响应时将用户数据保存在本地存储器中即可

Login.Vue

.then(res => {if (res.status === 200){
                console.log(res.data['id'])
                this.$router.push({name:'Contact', params:{userID: res.data['id'] }}) }
            })

export default {
    name: "contact",
    props:["userID"],
    data() {
        return {
            UserID: this.$route.params.userID,
           
        };
    },

.then(res => {
 if (res.status === 200) {
  console.log(res.data['id'])
  this.$router.push({ name:'Contact' })
  
  localStorage.setItem('user_id', res.data['id']);
 }
})

export default {
 name: 'Contact',

 data() {
  return {
   UserId: localStorage.getItem('user_id');
  };
 },
}

然后，如果您在浏览器开发人员工具的“应用程序”选项卡中查看本地存储，您可以在本地存储中看到

user\u id

。 现在，您可以从本地存储中获取所需组件的

用户id

：

联系人.vue

.then(res => {if (res.status === 200){
                console.log(res.data['id'])
                this.$router.push({name:'Contact', params:{userID: res.data['id'] }}) }
            })

export default {
    name: "contact",
    props:["userID"],
    data() {
        return {
            UserID: this.$route.params.userID,
           
        };
    },

.then(res => {
 if (res.status === 200) {
  console.log(res.data['id'])
  this.$router.push({ name:'Contact' })
  
  localStorage.setItem('user_id', res.data['id']);
 }
})

export default {
 name: 'Contact',

 data() {
  return {
   UserId: localStorage.getItem('user_id');
  };
 },
}

---

您需要在rooute中将

userId

用作参数，以便能够将URL中的用户id作为道具传递给组件：

{
        path: "/contact/:userId",
        name: "Contact",
        component: Contact,
        props: true
    }

---

请参见

显示如何定义路由

联系人

及其所有子项routes@Anatoly我已经更新了这个问题。你能检查一下吗？