Question

我在Vue中创建了一个登录页面，但是登录后，我需要将用户名转移到他/她的仪表板。我已经尝试了诸如事件总线之类的其他解决方案，但是它不起作用。还有其他解决方案吗？

这是我已经尝试过的：

// In my login page I have this after the user presses login 
bus.$emit('Login', this.Name);

// This is what I have in my dashboard page
created() {
  bus.$on('Login', obj => {
    this.currentName = obj;
  });
}

我希望在登录页面上输入的用户名也位于仪表板页面上。

Answer 1

如果您要构建强大的应用程序vuex，肯定是要走的路。

如果您只是在练习，则有两种获取用户名的方法

1）localStorage-用户单击“登录”时，可以设置一个变量来存储用户名。请注意，除非删除该值，否则它将在记录后保留。

登录方式

localStorage.setItem('username', this.name)

仪表板视图

<span>{{username}}</span>

<script>
 computed: {
   username() {
         return localStorage.getItem('username')
   }
}
</script>

2）路由器参数-当从登录视图导航到仪表板视图时，您将一个密钥添加到保存用户名的url

登录方式

this.$router.push({path: '/dashboard', query: {username: this.name }})

在仪表板视图上

<span>{{username}}</span>

 <script>
  data() {
   return {
       username: ''
    }
 },
created() {
   this.username = this.$route.query.username
}

在bus。$ on方法上，您可以尝试传入期望值并像这样更明确地设置它。.

created() {
  bus.$on('Login', ({name}) => {
    this.currentName = name;
  });
}

还请注意，要使用事件总线，您必须导入它的实例，我相信它是无法立即使用的

import Vue from 'vue'
export const EventBus = new Vue();

是否可以使用Vue将数据从一页传输到另一页？

1 个答案: