Vue实战：轻松创建资讯列表页，揭秘二级路由的奥秘

2023-12-30 16:22:05

Vue.js 二级路由和资讯列表的实现指南

在现代单页面应用开发中，有效组织和管理复杂路由结构至关重要。Vue.js 路由系统通过二级路由的概念解决了这一挑战，允许开发者创建嵌套的路由结构，提升代码可读性、可维护性和用户体验。本指南将深入探讨 Vue.js 中的二级路由和资讯列表功能的实现，助力你的 Vue.js 开发之旅。

实现二级路由

二级路由是 Vue.js 路由系统中嵌套路由的强大功能。它使开发者能够在主路由内定义子路由，从而创建层次分明的路由结构。

1. 创建文件夹结构

在 src/views 目录下，创建四个文件夹：home、news、profile 和 about，分别用于存放主页、资讯、个人中心和关于我们页面的组件。

2. 创建路由文件

在 src/router 目录下，创建 routes.js 文件，定义路由规则：

import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Profile from '../views/Profile.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/news',
    name: 'News',
    component: News,
    children: [
      {
        path: 'list',
        name: 'NewsList',
        component: () => import('../views/NewsList.vue')
      },
      {
        path: 'detail/:id',
        name: 'NewsDetail',
        component: () => import('../views/NewsDetail.vue')
      }
    ]
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

export default routes

在上述代码中，资讯列表页面下定义了两个子路由：NewsList 用于展示资讯列表，NewsDetail 用于展示资讯详情。

3. 导入路由文件

在 src/main.js 文件中，导入路由文件并应用到 Vue 实例：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.use(VueRouter)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

实现资讯列表

资讯列表功能是 Vue.js 应用中常见需求，它使开发者能够展示一系列资讯并允许用户查看详细信息。

1. 创建组件

在 src/views/News 目录下，创建 NewsList.vue 组件：

<template>
  <div>
    <h1>资讯列表</h1>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <router-link :to="'/news/detail/' + news.id">{{ news.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  created() {
    this.getNewsList()
  },
  methods: {
    getNewsList() {
      // 获取资讯列表的接口调用
    }
  }
}
</script>

2. 获取资讯列表数据

使用你熟悉的任何数据获取方式，例如 axios 或 fetch API，获取资讯列表数据。

getNewsList() {
  axios.get('/api/news').then(res => {
    this.newsList = res.data
  })
}

3. 渲染资讯列表

在 src/App.vue 文件中，渲染资讯列表组件：

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

<script>
export default {
  components: {
    NewsList
  }
}
</script>