Vue3 + Vue Router 微头条项目学习笔记

Vue3 + Vue Router 微头条项目学习笔记

一、项目背景

本次课程作业是基于 Vue3 + Vue Router 实现的「微头条」单页应用，核心目标是掌握 Vue 路由的基础配置、路由守卫、组件间状态传递与简单交互逻辑开发。经过多次调试与排错，终于成功实现了登录跳转、首页发布/删除/点赞、退出登录等功能，踩过的坑也让我对 Vue 项目的运行逻辑有了更深刻的理解。

二、项目核心功能与实现

1. 路由配置与基础跳转

项目采用 Vue Router 4.x 实现单页路由管理，核心配置如下：

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

const routes = [
  { path: '/', redirect: '/login' }, // 根路径重定向到登录页
  { path: '/login', component: Login },
  { path: '/home', component: Home }
]

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

在 main.js 中挂载路由后，通过 <router-view /> 实现组件渲染，完成登录页与首页的基础切换。

2. 登录页逻辑实现

登录页核心功能包括表单输入、账号验证、本地存储 Token 与路由跳转：

<template>
  <div class="login-card">
    <h2>微头条登录</h2>
    <input type="text" placeholder="用户名" v-model="username">
    <input type="password" placeholder="密码" v-model="password">
    <button @click="handleLogin">登录</button>
    <button @click="clearForm">清空</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const username = ref('')
const password = ref('')
const router = useRouter()

const handleLogin = () => {
  // 模拟账号验证
  if (username.value === 'weibotiao' && password.value === '123456') {
    localStorage.setItem('token', 'fake-token') // 模拟存储登录态
    router.push('/home') // 登录成功跳转到首页
  } else {
    alert('用户名或密码错误')
  }
}

const clearForm = () => {
  username.value = ''
  password.value = ''
}
</script>

这里踩过一个关键的坑：ref 声明的变量必须用 .value 访问，之前误写为下划线格式，直接导致页面渲染报错白屏，这也让我牢记了 Vue3 响应式变量的基础语法规范。

3. 首页交互逻辑实现

首页实现了微头条的发布、删除、点赞与退出登录功能，核心代码如下：

<template>
  <div class="container">
    <div class="header">
      <h2>微头条首页</h2>
      <button @click="logout">退出登录</button>
    </div>
    <div class="publish-area">
      <input v-model="newTitle" placeholder="新闻标题">
      <button @click="addNews">发布微头条</button>
    </div>
    <div class="news-list">
      <div v-if="newsList.length === 0" class="empty">暂无新闻，快去发布</div>
      <div v-for="item in newsList" :key="item.id" class="news-item">
        <h3>{{ item.title }}</h3>
        <div class="time">{{ item.time }}</div>
        <div class="content">{{ item.content }}</div>
        <div class="actions">
          <button @click="deleteNews(item.id)">删除</button>
          <button @click="likeNews(item.id)">点赞 {{ item.likes }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 初始模拟数据
const newsList = ref([
  { id: 1, title: '微头条1.0发布', time: '2025-06-01', content: '内容1', likes: 0 },
  { id: 2, title: 'Vue3学习', time: '2025-06-02', content: '内容2', likes: 0 }
])
let nextId = 3
const newTitle = ref('')

// 发布微头条
const addNews = () => {
  if (!newTitle.value.trim()) return // 非空校验
  newsList.value.push({
    id: nextId++,
    title: newTitle.value,
    time: new Date().toLocaleString(),
    content: '这是新发布的微头条',
    likes: 0
  })
  newTitle.value = '' // 发布后清空输入框
}

// 删除微头条
const deleteNews = (id) => {
  newsList.value = newsList.value.filter(item => item.id !== id)
}

// 点赞功能
const likeNews = (id) => {
  const item = newsList.value.find(i => i.id === id)
  if (item) item.likes++
}

// 退出登录
const logout = () => {
  localStorage.removeItem('token') // 清除登录态
  router.push('/login') // 跳转到登录页
}
</script>

这里的关键错误是 addNews 函数中，push 对象忘记用 {} 包裹，导致语法错误，页面直接白屏，后来修正后功能才正常运行。

4. 路由守卫（权限控制）

为了实现未登录无法访问首页的功能，添加了路由守卫：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.path === '/home' && !token) {
    next('/login') // 未登录强制跳转到登录页
  } else {
    next()
  }
})

通过 localStorage 存储的 Token 模拟登录态，实现了基础的权限校验逻辑。

三、踩坑记录与解决方法

1. 页面白屏问题：
   • 原因：ref 变量访问错误、组件内语法错误、路由配置路径错误
   • 解决：按 main.js → App.vue → router/index.js → 组件 的顺序逐行检查，确保路径正确、语法无误，同时通过浏览器控制台查看报错信息定位问题。
2. 路由跳转不生效：
   • 原因：main.js 中未挂载路由、App.vue 未保留 <router-view />
   • 解决：确保 createApp(App).use(router).mount('#app') 完整，且 App.vue 仅保留路由渲染标签。
3. 依赖安装问题：
   • 原因：vue-router 未安装或版本不兼容
   • 解决：执行 npm install vue-router@4 安装 Vue3 适配的路由版本，删除 node_modules 后重新安装依赖。

四、学习总结与收获

通过本次项目实践，我不仅掌握了 Vue3 + Vue Router 的基础使用，更深刻体会到了前端项目调试的重要性：

1. 语法规范是基础：Vue3 的 ref 响应式变量、路由配置路径等细节错误，都会直接导致项目无法运行，必须养成严谨的编码习惯。
2. 调试是必备能力：浏览器控制台的报错信息是定位问题的关键，学会通过报错快速定位问题，比盲目修改代码效率高得多。
3. 路由的核心作用：单页应用中，路由是实现页面切换与权限控制的核心，通过路由守卫可以轻松实现基础的权限校验逻辑。

本次作业虽然过程坎坷，但最终成功运行的那一刻，所有的调试都变得值得。后续我会继续深入学习 Vue 路由的进阶用法，如路由传参、嵌套路由等，不断提升自己的前端开发能力。