Блог

Главная - Вопросы по программированию - почему VueRouter по-прежнему рендерит и все остальные компоненты? (очень признателен)

почему VueRouter по-прежнему рендерит и все остальные компоненты? (очень признателен)

#vue.js #vue-router #vuejs3

Вопрос:

прежде всего, спасибо,

Я явно создал три маршрутизатора, и при нажатии URL-адрес меняется, но остальные два компонента также отображаются.

Кроме того, он не меняется на эту конкретную страницу. это просто показывает его ниже другого контента ниже

Я прочитал и посмотрел несколько видео, не могу понять, чего мне здесь не хватает

devtools также по некоторым причинам показывает описание ввода изображения здесь, что странно и странно, я остановил и перезапустил службу, проблема все еще сохраняется.

Пожалуйста, помогите, спасибо

 my app components :


<template>
  <div id="app">
    <h1>Welcome</h1>
    <div>
      <h2>Are you first time visiting?</h2>
      <router-link 
      to="/firstUser"
      > 
      Register </router-link>
    </div>
    <div>
      <h2>Continue with registration</h2>
      <router-link to="/returningUser"> Continue </router-link>
    </div>
    <div>
      <h2>Show all your info</h2>
      <router-link to="/registeredUser"> show </router-link>
    </div>
  </div>
  <div>

  </div>
  <router-view />
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
};
</script>

router index.js file:

import { createRouter, createWebHistory } from 'vue-router';
import firstUser from '@/views/firstUser';
import returningUser from '@/views/returningUser';
import registeredUser from '@/views/registeredUser';


const routes = [{
        path: '/firstUser',
        name: 'firstUser',
        component: firstUser,

    },
    {
        path: '/returningUser',
        name: 'returningUser',
        component: returningUser,

    },
    {
        path: '/registeredUser',
        name: 'registeredUser',
        component: registeredUser,

    },

]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router


and one of the pages firstUser: 



<template>
  <div>
    <form class="form" @submit.prevent="registerUser">
      <h4 class="">Register</h4>
      <my-input
        v-model="this.firstName"
        type="text"
        class="input"
        placeholder="First Name"
      />
      <my-input
        v-model="this.lastName"
        type="text"
        class="input"
        placeholder="Last Name"
      />
      <myButton @click="registerUser"> Register </myButton>
    </form>
  </div>
</template>

<script>
import myInput from "@/components/UI/myInput.vue";
import myButton from "@/components/UI/myButton.vue";
export default {
  name: "firstUser",
  components: { myInput, myButton },
  data() {
    return {
      user: [
        {
          firstName: "",
          lastName: "",
        },
      ],
      users: [],
    };
  },
  methods: {
    registerUser() {
      const newUser = {
        firstName: this.firstName,
        lastName: this.lastName,
      };
      this.users.push(newUser);
      console.log(newUser);
    },
  },
};
</script>

Комментарии:

1. Я думаю, что у вас ошибка вложенности, <router-view /> она должна быть внутри <div id="app">

2. учитывая тот факт, что когда я использую vue-cli, он помещает его ниже, я не уверен, что здесь проблема в этом

3. вы не должны «просто» использовать push для пользователей, так как это, скорее всего, не вызовет прослушивания. Вы должны повторно воздействовать на все массивы после их изменения.

4. работает ли это при ручном посещении URL-адресов ?

5. @laenNoCode да, это работает. это просто не показывает только эту конкретную страницу, но продолжает показывать другие

Ответ №1:

Я изменил положение вашего представления маршрутизатора .Шаблон может содержать только один корневой элемент. Я думаю, что это ваш случай здесь

 my app components :


<template>
  <div id="app">
    <h1>Welcome</h1>
    <div>
      <h2>Are you first time visiting?</h2>
      <router-link 
      to="/firstUser"
      > 
      Register </router-link>
    </div>
    <div>
      <h2>Continue with registration</h2>
      <router-link to="/returningUser"> Continue </router-link>
    </div>
    <div>
      <h2>Show all your info</h2>
      <router-link to="/registeredUser"> show </router-link>
    </div>
  </div>
  <div>
 <router-view />
  </div>
 
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
};
</script>

router index.js file:

import { createRouter, createWebHistory } from 'vue-router';
import firstUser from '@/views/firstUser';
import returningUser from '@/views/returningUser';
import registeredUser from '@/views/registeredUser';


const routes = [{
        path: '/firstUser',
        name: 'firstUser',
        component: firstUser,

    },
    {
        path: '/returningUser',
        name: 'returningUser',
        component: returningUser,

    },
    {
        path: '/registeredUser',
        name: 'registeredUser',
        component: registeredUser,

    },

]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router


and one of the pages firstUser: 



<template>
  <div>
    <form class="form" @submit.prevent="registerUser">
      <h4 class="">Register</h4>
      <my-input
        v-model="this.firstName"
        type="text"
        class="input"
        placeholder="First Name"
      />
      <my-input
        v-model="this.lastName"
        type="text"
        class="input"
        placeholder="Last Name"
      />
      <myButton @click="registerUser"> Register </myButton>
    </form>
  </div>
</template>

<script>
import myInput from "@/components/UI/myInput.vue";
import myButton from "@/components/UI/myButton.vue";
export default {
  name: "firstUser",
  components: { myInput, myButton },
  data() {
    return {
      user: [
        {
          firstName: "",
          lastName: "",
        },
      ],
      users: [],
    };
  },
  methods: {
    registerUser() {
      const newUser = {
        firstName: this.firstName,
        lastName: this.lastName,
      };
      this.users.push(newUser);
      console.log(newUser);
    },
  },
};
</script>

Комментарии:

1. Спасибо за попытку, это определенно не из-за позиции, так как я пробовал это множеством разных способов

2. В Vue 3 у вас действительно может быть несколько корневых элементов, так что это не проблема как таковая.

Метки: