vue项目组装-路由-文件修改地方

去找资源

https://download.csdn.net/download/hashiqimiya/92753755https://download.csdn.net/download/hashiqimiya/92753755

配置好资源。

操作：

mkfile src/views/Home.vue

复制代码

<template>
  <div>
    <header>
      <nav>
        <router-link to="/" class="logo">Vue博客</router-link>
        <ul class="nav-links">
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="/questions">问题</router-link></li>
          <li><a href="#">关于</a></li>
        </ul>
      </nav>
    </header>
    </div>
</template>
<style scoped>
</style>

mkfile src/views/Questions.vue

复制代码

<template>
  <div>
    <header>
      <nav>
        <router-link to="/" class="logo">Vue博客</router-link>
        <ul class="nav-links">
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="/questions">问题</router-link></li>
          <li><a href="#">关于</a></li>
        </ul>
      </nav>
    </header>
    
    <main>
      <div class="questions-container">
        <div class="questions-header">
          <h1>问题列表</h1>
          <button class="add-question-btn" @click="showAddForm = !showAddForm">
            {{ showAddForm ? '取消' : '新增问题' }}
          </button>
        </div>
        
        <!-- 新增问题表单 -->
        <div v-if="showAddForm" class="add-question-form">
          <input 
            type="text" 
            v-model="newQuestion.title" 
            placeholder="问题标题"
            class="question-input"
          >
          <textarea 
            v-model="newQuestion.content" 
            placeholder="问题内容"
            class="question-textarea"
          ></textarea>
          <button @click="addQuestion" class="submit-btn">提交问题</button>
        </div>
        
        <!-- 问题列表 -->
        <div class="questions-list">
          <div v-for="question in questions" :key="question.id" class="question-card">
            <h3>{{ question.title }}</h3>
            <p>{{ question.content }}</p>
            <div class="question-meta">
              <span>{{ question.date }}</span>
            </div>
          </div>
          <div v-if="questions.length === 0" class="empty-state">
            <p>暂无问题，点击"新增问题"添加</p>
          </div>
        </div>
      </div>
    </main>
    
    <footer>
      <div class="footer-content">
        <p>&copy; 2026 Vue博客. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Questions',
  data() {
    return {
      showAddForm: false,
      newQuestion: {
        title: '',
        content: ''
      },
      questions: [
        {
          id: 1,
          title: '如何使用Vue 3的Composition API?',
          content: '我想了解Vue 3的Composition API的基本使用方法，特别是如何组织代码结构。',
          date: '2026-03-22'
        },
        {
          id: 2,
          title: 'TypeScript和Vue 3的结合使用',
          content: '在Vue 3项目中如何更好地使用TypeScript，有什么最佳实践吗？',
          date: '2026-03-21'
        }
      ]
    }
  },
  methods: {
    addQuestion() {
      if (this.newQuestion.title && this.newQuestion.content) {
        const newId = this.questions.length > 0 ? Math.max(...this.questions.map(q => q.id)) + 1 : 1
        this.questions.unshift({
          id: newId,
          title: this.newQuestion.title,
          content: this.newQuestion.content,
          date: new Date().toISOString().split('T')[0]
        })
        // 重置表单
        this.newQuestion.title = ''
        this.newQuestion.content = ''
        this.showAddForm = false
      }
    }
  }
}
</script>

mkfile src/router/index.js

复制代码

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Questions from '../views/Questions.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/questions',
    name: 'Questions',
    component: Questions
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

App.vue

复制代码

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

main.js

增加

import router from './router'

.use(router)

修改成

复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

操作：

首页点击问题即可跳转。