跳到主要内容

电影收藏列表页面实现

我们收藏了很多电影，那么就需要设计一个收藏电影的列表。当点击“我的收藏”时，展示这些所收藏的电影。 本节我们就来实现这个功能。

添加菜单和路由​

首先，在页面的下拉菜单中添加一个"我的收藏"选项，并且为其创建一个路由。用户点击"我的收藏"时，将跳转到收藏列表页面。

在 header.vue 中，找到下拉菜单，并添加一个菜单项 "我的收藏"，让其跳转到 /collect 路由。代码如下：

frontend/src/components/Header.vue
<ul class="bg-primary-700 py-2 px-4 text-sm">
  <li class="plx-2 py-2">
    <a href="/personal">个人中心</a>
  </li>
  <li class="plx-2 py-2">
    <a href="/collect">我的收藏</a>
  </li>
  <li class="plx-2 py-2">
    <router-link to="/" v-on:click.prevent="logout()">退出</router-link>
  </li>
</ul>

图56-我的收藏按钮

然后，在前端路由中的 index.js 文件中，添加一个名为 "Collect" 的路由，并且设置为需要用户登录才能访问。代码如下：

🔒 试读结束

继续阅读完整内容

以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。

查看课程详情