Vue3仿卖座电影开发纪实（一）：搭建导航

@源码地址

码云代码仓库

@创建工程

• npm init vue@latest
• 工程名mymovie,后续选项中必须选择Vue-Router，其它皆No;
• 运行工程

cd mymovie

# 安装需要的依赖
npm install 或 npm i

# 运行工程
npm run dev

@搭建基本路由跳转

定义页面组件

src/views/FilmView.vue

<!-- 
.vue文件是单文件组件（SingleFileComponent/SFC） 
组件是页面中的一小块
-->

<!-- 组件的模板/DOM -->
<template>
  <h3 class="title">电影页面</h3>
</template>

<!-- 组件的互动脚本 -->
<script>
export default {

}
</script>


<!-- 组件的样式 -->
<style>
.title {
    text-align: center;
}
</style>

如法炮制继续定义出其它三个页面组件：CinemaView.vue + NewsView.vue + MineView.vue

配置路由表

src/router/index.js

导入自己的页面组件

/* 导入自己的页面组件 */
import FilmView from "../views/FilmView.vue";
import CinemaView from "../views/CinemaView.vue";
import NewsView from "../views/NewsView.vue";
import MineView from "../views/MineView.vue";

添加路由配置

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),

    /* 路由表 */
    routes: [
        /* 定义路由 */
        {
            path: "/film",
            name: "film",
            component: FilmView,
        },
        {
            path: "/cinema",
            name: "cinema",
            component: CinemaView,
        },
        {
            path: "/news",
            name: "news",
            component: NewsView,
        },
        {
            path: "/mine",
            name: "mine",
            component: MineView,
        },
    ],
});

在首页添加跳转链接

src/App.vue

<template>
  <header>
    <div class="wrapper">
      <nav>
        <!-- 点击跳转应用内路由 / -->
        <!-- 点击时本质切换的是组件 -->
        <!-- 目标组件会显示在RouterView中 -->
        <!-- RouterLink渲染完毕的最终结果是a标签 -->
        <!-- 点击链接的时候 跳转地址 地址对应的组件在路由表中 -->
        <RouterLink to="/film">电影</RouterLink>
        <RouterLink to="/cinema">影院</RouterLink>
        <RouterLink to="/news">资讯</RouterLink>
        <RouterLink to="/mine">我的</RouterLink>
      </nav>
    </div>
  </header>

  <!-- 目标组件的承载容器 -->
  <RouterView />

</template>

@配置导航图标

准备工作

• 下载font-awesome字体图标压缩包 菜鸟教程下载地址
• 解压，将font文件夹放置到assets目录下
• 将css/font-awesome.css放到assets/css目录下

• 在main.js中引入font-awesome样式

import './assets/css/font-awesome.css'

修改RouterLink布局

<nav class="tab-wrapper">
        <!-- 点击跳转应用内路由 / -->
        <!-- 点击时本质切换的是组件 -->
        <!-- 目标组件会显示在RouterView中 -->
        <!-- RouterLink渲染完毕的最终结果是a标签 -->
        <!-- 点击链接的时候 跳转地址 地址对应的组件在路由表中 -->
        <RouterLink active-class="active" class="tab" to="/film">
                <span><i class="fa fa-toggle-right"></i></span>
                <span>电影</span>
        </RouterLink>

        <RouterLink active-class="active" class="tab" to="/cinema">
                <span><i class="fa fa-bank"></i></span>
                <span>影院</span>
        </RouterLink>

        <RouterLink active-class="active" class="tab" to="/news">
                <span><i class="fa fa-volume-up"></i></span>
                <span>资讯</span>
        </RouterLink>

        <RouterLink active-class="active" class="tab" to="/mine">
                <span><i class="fa fa-user-circle"></i></span>
                <span>我的</span>
        </RouterLink>
</nav>

修改一下样式

略，请参见源码 码云代码仓库

最终效果如下：