почему html-контент не отображается при запуске


почему html-контент не отображается при запуске

30.10.2020 08:25:50 Просмотров 54 Источник

Теперь я использую код visual studio для выполнения своего проекта. Я могу построить свой код без ошибок, но при запуске он не показывает содержимое html-файла, а только показывает css, например верхний и Нижний колонтитулы. у меня есть кнопка click в заголовке, но я не могу перейти на другую страницу.Вот пример кода

код в index.html

<nav>
        <a href="#/home">List</a>
        <a href="#/insert">New student</a>
        <a href="#/feedback">Student feedback</a>
    </nav>

Маршрутизатор Vue

const router = new VueRouter({
            routes: [
                { path: '/home', component: load('home') },
                { path: '/insert', component: load('insert') },
                { path: '/update/:id', component: load('update') },
                { path: '/feedback', component: load('feedback') },
                { path: '*', redirect: '/home' }
            ]
        });

Имя и тип файла: _home.html, _insert.html, _update.html, _feedback.html

Можете помочь мне увидеть проблему, спасибо

У вопроса есть решение - Посмотреть?

Ответы - почему html-контент не отображается при запуске / why the html content not shown out when running

Является ответом!
Thor-x86_128

30.10.2020 08:38:14

Я не думаю, что вы должны редактировать непосредственно index.html as Vue - это фреймворк одностраничного приложения (SPA). Вместо этого вы должны использовать компонент Vue для каждой страницы.

Это видео может помочь вам понять, как правильно использовать Vue и vue Router: https://youtu.be/nnVVOe7qdeQ

Редактировать:

Для ясности позвольте мне построить для вас упрощенную схему проекта Vue.

Simplified Vue Project Diagram

Прежде всего, убедитесь, что вы создаете проект через vue cli. Это поможет вам лучше построить свой новый проект vue.

Допустим, у нас есть 3 страницы:

  • Домой
  • О
  • Другой

Каждая страница имеет свой собственный CSS, HTML (мы называем его шаблоном) и JavaScript в одном файле, файле .vue. Чтобы соединить их, нам нужен первый вход, main.js. Внутри него мы можем настроить маршрутизатор.

Внутри main.js

import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import HomePage from "./HomePage.vue";
import AboutPage from "./AboutPage.vue";
import AnotherPage from "./AnotherPage.vue";

// This is your router configuration
Vue.use(VueRouter);
const router = new VueRouter({
  [
    { path: "/",        component: HomePage },
    { path: "/about",   component: AboutPage },
    { path: "/another", component: AnotherPage },
  ],
  mode: "history",
});

// Initialize Vue App
new Vue({
  router,
  render: h => h(App),
}).$mount("#app");

Затем нам нужно создать App.vue и поместить в него <router-view />.

Внутри исходного файла App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  // Keep this empty. Except if you
  // need to add sidebar or any else.
}
</script>

Теперь вы готовы создать эти три страницы

Каждая страница выглядит так:

<style scoped>
  // Your CSS here
</style>

<template>
  <div>
    <!-- Your HTML here -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Your reactive data here
      }
    },
    mounted() {
      // Your script here
    },
    methods: {
      // Your functions here
    },
  }
</script>

Это все, что я могу объяснить, надеюсь, это поможет. Если я что-то пропустил, пожалуйста, не стесняйтесь сказать мне. Спасибо!

Помочь в развитии проекта:
Закрыть X