Блог

У меня есть страница, которая загружает данные в таблицу из базы данных Mongodb.

То, что я пытаюсь сделать, это щелкнуть строку таблицы, а затем перейти на другую страницу.

Я сделал обработчик событий для маршрутизации другой страницы при ее нажатии.

и установите точно такой же исходный код страницы с другим именем файла vue.

на исходной странице данные загружаются хорошо, но на другой маршрутизируемой странице отображается ошибка HTTP 404

порядок программы такой

 User_Management.vue --(click table row)--> User_Management_detail.vue (url:/row.id)
└>PostService.js                           └>PostService.js 
  └> post_users.js                           └> post_users.js
 

и страница User_Management, и страница _detail.vue имеют одинаковый код.
но url отличается (User_Management_detail/:id)

это ошибка HTTP

 GET http://localhost:8080/User_Management_detail/api/posts_users/ 404 (Not Found)
 

<<router/index.js >>

 import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/User_Management",
    name: "User_Management",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/User_Management.vue"),
  },
  {
    path: "/User_Management_detail/:id",
    name: "User_Management_detail",
    component: () =>
      import("../views/User_Management_copy.vue")
  },
];    

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

<<Управление пользователем/User_Management_detail.vue>>

  <template>
 <v-app
    :style="{ background: $vuetify.theme.themes.light.background }"
    style="max-height:100vw;"
  >
  <v-container style="width: 97%">
    <v-card>
      <v-card-title>
        Users
        <v-spacer></v-spacer>
      <v-col class="text-right">
      <v-dialog v-model="dialog" max-width="500px">
      <p class="error" v-if="error">{{ error }}</p>

      <v-data-table
        v-model="selected"
        :headers="headers"
        v-bind:index="posts.index"
        v-bind:item="posts.post"
        :items="posts"
        :single-expand="singleExpand"
        :expanded.sync="expanded"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        item-key="_id"
        show-select
        show-expand
        :search="search"
        class="[item.selected amp;amp; 'selected']"
        @click:row="handleClick"
      > 
      </v-data-table>
    </v-card>
  </v-container>
  </v-app>
</template>

<script>
import PostService from "../PostService";
export default {
  components: {},
  name: "PostComponent",
  data() {
    return {
      posts: [],
      error: "",
      text: "",
      sortBy: 'users_docs[0].createdAt',
      sortDesc: true,
      headers: [
        { text: "User G_ID", value: "_id" },
        { text: "User ID", value: "users_docs[0].userID" },
        { text: "First Name", value: "users_docs[0].firstName" },
        { text: "Last Name", value: "users_docs[0].lastName" },
        { text: "Department", value: "users_docs[0].department" },
        { text: "Role", value: "users_docs[0].role" },
        { text: "Status", value: "users_docs[0].status" },
        {
          text: "Enrollment Time",
          value: "users_docs[0].createdAt".toString()
        },
        { text: "Actions", value: "actions", sortable: false }
      ],      
      deviceName: ""
      }
    };
  },
  async created() {
    try {
      this.posts = await PostService.get_Users_Posts();
    } catch (err) {
      this.error = err.message;
    }
  },  
  methods: {
    handleClick(row) {
      console.log(row.users_docs[0]._id);
      alert(row.users_docs[0]._id)
      this.$router.push({path: `/User_Management_detail/:${row.users_docs[0]._id}`})
    }    
  }
};
</script>
 

<< postService.js >>

 import axios from "axios";
const url_users = "api/posts_users/";
class PostService {
   // get users posts
   static get_Users_Posts() {
    return new Promise(async (resolve, reject) => {
      try {
        const res = await axios.get(url_users);
        const data = res.data;
        resolve(
          data.map((post) => ({
            ...post,
                //createdAt: new Date(post.createdAt),
      }))
        );
      } catch (err) {
        reject(err);
      }
    });
  }    
}
export default PostService;
 

<< post_users.js >>

 const express = require('express');
const mongodb = require('mongodb');
const router = express.Router();

// Get User Posts
router.get('/', async(req, res) => {
    const posts = await loadPostsCollection_Users();
    res.send(await posts.find({}).toArray());
});

async function loadPostsCollection_Users() {
    const client = await mongodb.MongoClient.connect('mongodb://ipAddr:port/tms', {
        useNewUrlParser: true
    });
    return client.db('tms').collection('integrated_users');
}
module.exports = router;