Witam, muszę wiedzieć, jak mogę rozwiązać ten problem.

Chcę wiedzieć, jak otworzyć stronę z parametrami z danych.

Oto przepływ, co chcę zrobić.

  1. kilka osób otrzymuje e-mail. jest przycisk prowadzący do strony z ich identyfikatorem.
  2. Po naciśnięciu przycisku serwer identyfikuje ich i wysyła ich nazwę z bazy danych.
  3. przekieruj ich na stronę główną. z ich danymi imiennymi.
  4. strona główna (vue) wyświetla ich nazwę w stylu „witaj w domu. Pan Smith"

Utknąłem między krokiem 3 a 4. Wysyłam ich imiona i nazwiska jako zapytanie. Ale nie wiem, jak je otrzymać.

Pomyślałem, że można to wykorzystać jako rekwizyty. ale pokazuje tylko „niezdefiniowane”

Tutaj jest mój kod js węzła.

res.redirect(url.format({
    pathname:"/",
    query: {
       "name": rows[0].name,
       "familyname": rows[0].familyname,
       "gender":rows[0].gender
     }
  }));

A to jest część routera vue. (router.js)

routes: [
    {
        path: '',
        props: true,
        component: () => import('./layouts/main/Main.vue'),
        children: [ ... ]
    }]

I tworzę mój kod main.vue w ten sposób.

export default {
  props: ['name','familyname','gender'],
  methods: {
     showprops() {
       alert(this.$props.name);
     }
  },
  created() {
     this.showprops();
  }

Bieżący wynik jest niezdefiniowany, gdy wywoływana jest funkcja alert (this. $ Props.name). Jak mogę rozwiązać ten problem?

Z góry dziękuję.

0
박영환 13 styczeń 2020, 10:56

1 odpowiedź

Najlepsza odpowiedź

$ route.Query.

Wygląda na to, że włączasz swoje parametry jako query parameter, np. /?name=xxx&familyname=xxx&gender=xxx. Aby uzyskać this.$route.query.

$ route.props.

Aby mieć rekwizyty takie jak this.$route.props, wymagałoby to adresu URL jak /user/12345/bob i konfiguracja routera Vue

routes: [
 { path: '/user/:id/:name', component: User, props: true }
]

Konwersja parametrów zapytania do rekwizytów routera Vue

W oficjalnych dokumentach routera Vue znajdziesz bardzo ładny przykład na temat użycia Function Mode, aby przekonwertować parametry zapytania do rekwizytów (https://router.vuejs.org/guide/essentials/pasing-props.html#function-mode).

const router = new VueRouter({
  routes: [
    { path: '/search',
      component: SearchUser,
      props: (route) => ({ query: route.query.q })
    }
  ]
})

Od przykładu powyżej adresu URL /search?q=vue minąłoby {query: 'vue'} jako rekwizyty do składnika SearchUser.

1
Community 20 czerwiec 2020, 09:12