Блог

Главная - Вопросы по программированию - Не удается заставить маршрутизатор vue работать должным образом

Не удается заставить маршрутизатор vue работать должным образом

#vue.js #vue-router

Вопрос:

Я изо всех сил пытаюсь заставить маршрутизатор vue работать должным образом, несмотря на то, что я перепробовал множество разных способов и прочитал документацию, кажется, есть что-то, чего я не понимаю

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

Мне нужно сделать так, чтобы при нажатии на него отображалась только страница первого пользователя, пожалуйста, помогите, очень признателен

 //This is my app component


<template>
  <div id="app">
    <h1>Welcome</h1>
    <router-view> 
      <router-link to="firstUser"> <first-user/> Register </router-link> 
    </router-view>
    <div>
      <h2>Returning user</h2>
      <returning-user />
    </div>
    <div>
      <h2>Registered User</h2>
      <registered-user />
    </div>
  </div>
</template>

<script>
import firstUser from "@/components/firstUser.vue";
import returningUser from "@/components/returningUser.vue";
import registeredUser from "@/components/registeredUser.vue";

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

<style>
#app {
  padding: 20px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input:focus {
  outline: none;
}
</style>

//this is my fisrtUser component


<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"> Create </myButton>
    </form>
  </div>
</template>

<script>
import myInput from "./UI/myInput.vue";
import myButton from "./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>

<style>
</style>


///then this is the index.js from router



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


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

]

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

export default router

и

Ответ №1:

Не совсем ясно, что такое firstUser s. Я буду считать, что вы сделали это намеренно, и есть два firstUser s (один вид и один компонент).

Укажите to реквизит router-link компонента так же, как вы указали бы href атрибут элемента ссылки/привязки <a> . То есть маршрут должен начинаться с косой черты.

 <router-link to="/firstUser">

В качестве альтернативы вы можете уменьшить связь, объявив вместо этого ссылку по имени маршрута. Таким образом, вы можете изменить маршрут на любой, какой захотите, без необходимости обновлять свою ссылку. Это можно сделать с помощью v-bind команды Vue для анализа содержимого реквизита и с использованием другого синтаксиса.

 <router-link :to="{ name: 'firstUser' }">

См. Документацию по маршрутизатору Vue.

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

1. Да, у меня есть два одинаковых компонента, один в представлениях, другой в компонентах (до сих пор не могу понять, что я должен куда поместить (извините, я новичок и учусь самостоятельно).. Тогда да, ссылка на маршрутизатор была неправильной, оказывается, она работала, но теперь домашняя ссылка показывает все, кроме компонента/страницы firstUser, а также при вводе вручную firstUser также ничего не даст

2. Но в том числе просмотр маршрутизатора показывает документ, но странно по-другому, как и все, а затем снова все по ссылке

3. @Eternal Вы можете проверить базовый проект vue с помощью регистрации пользователя, входа в систему, Vue-Router4, защиты авторизации, маршрута аутентификации пользователя, Vuex4, Todo Tutorial и проверки форм github.com/Jebasuthan/vue3-todo

Метки: