vue3微信公众号商城项目实战系列（4）第一个页面

在开始写第一个页面之前，先简单看下 index.html 、App.vue、main.js、HelloWorld.vue、TheWelcome.vue、WelcomeItem.vue

这几个页面的代码并了解一下它们是怎么运作的，有了一定的基础后再完成从一个页面跳转到另一个页面这个最基本的操作。

index.html 和 main.js 代码如下：

index.html文件的关键代码只有2行：

10行：定义了一个 id=app的div元素，它相当于一个占位符，其作用是显示 vue3 中页面的内容。

11行：引用 main.js 文件；

再看 main.js ，总共4行代码，其作用如下：

1行：导入 vue 包中的 createApp()函数。

导入包中的某个函数就用 import { xxx } from 'ppp' 这样的格式，函数不用加 "( )" ，且放在 "{ }" 中， from 后是包名。

2行：导入 App.vue 页面

导入页面/组件都用同样的格式： import xxx from 'ccc' ，xxx 是页面/组件名称（可以取任意的名字，但取名后就只能使用这个名字了），ccc是页面/组件的路径。

4行：导入 main.css 样式文件

导入样式用 import 'sss' 这样的格式，后面不需要加 from 。

6行：createApp( ) 函数和mount( )函数。

createApp( ) 函数用于创建一个vue3应用的实例，每个应用实例都需要一个“根组件”，其他组件将作为其子组件，这里的根组件就是 App.vue 。

应用实例必须在调用了 .mount() 方法后才会将组件渲染出来，也就是说必须调用此方法才能将应用根组件的内容渲染在容器元素（id=app的div就是容器元素）里面。

注意：容器元素自己将不会被视为应用的一部分。

接下来，我们看一下 App.vue 这个页面的内容，内容如下：

注： vue3 中所有页面/组件都以 .vue 为后缀名，所有的功能都是在页面/组件中编码实现的。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

可以看到，一个 .vue 文件由3大部分组成，分别是：

简洁、清晰、明了。

页面的执行流程如下：

了解了以上基础，可以看到vue3项目的完整运作流程是：

npm run dev启动Web服务器 --》浏览器访问 http://localhost:5173/ --》执行 index.html 页面 --》main.js 执行 --》

createApp() 执行后挂载：将 App.vue 页面内容解析完后挂载到 index.html 页面的 id=app 的div上，之后呈现给用户的就是如下的页面：

如上图所示，App.vue 页面由 HelloWorld.vue （左边区域）和 TheWelcome.vue （右边区域）这2个组件组成

， TheWelcome.vue 组件内又包含多个 WelcomeItem.vue 子组件。

了解完上面的基础，我们不打算进一步分析 TheWelcome.vue 和 WelcomeItem.vue 等文件了，现在要直奔本篇的主题：完成一个页面到另一个页面的跳转。

页面设计：浏览网站时自动打开第一个页面 Welcome.vue ，显示 "欢迎回来" 4个字，旁边有一个 "浏览进入" 的链接，点这个链接的时候，跳转到 Home.vue 页面，如下图：

对于如此简单的功能，如果用传统的3件套来写，一个<a>标签就可以搞定了，但是我们现在做的是vue3项目

，导航的玩法肯定要有那么一点点与众不同，至少要增加一些难度，这样我们谈到前端的时候，就可以说：什么档次，跟我用一样的导航。

在vue3中，导航是通过 Vue Router包、 <router-link><router-link>标签、<router-view></router-view>标签一起完成的，官网上给了一个简单的例子：

根据示例，有如下几个要点需要掌握：

【知识点1】

1. vue3中的超链接用 <router-link>标签来定义，而不用<a>标签，因为前者跳转页面不刷新，而后者会刷新。

2. <router-link>不刷新页面，那获取的内容如何呈现呢？答案就是放在<router-view>标签内。

3. 根据示例上的描述<router-view>可以放在任何地方，既然页面没有刷新，理论上整个项目只需要一个<router-view>标签就可以了，

显然，我们放在 App.vue 这个根组件上是最合适的（就像写PC端网页一样，在页面放一个iframe，所有链接到在这个iframe打开就可以了）。

推论（没有源码验证，仅供参考）：

<router-link>标签背后的处理逻辑不只是跳转一个页面这么简单，它应该是封装了一个类似ajax的请求去获取目标页面的内容，

然后将得到的html设置到 <router-view> 这个占位符的元素里面。

Vue Router的官方文档：https://router.vuejs.org/zh/introduction.html，摘录如下：

使用 Vue Router ：

先在项目根目录下打开命令窗口安装 Vue Router 包，命令：npm install vue-router@4

该命令中 vue-router是包名称， @4 表示大版本号是4，这样会安装大版本号4的最新小版本，如下：

安装中......

安装完成

在 node_modules 目录下可以看到 vue-router 文件夹了，如下：

然后对项目中的文件做一下改造：

1. 在 src 目录下新增 views文件夹。

2. 在src/views文件夹下新增 Welcome.vue 和 Home.vue 文件。

3. 删除 src/components/目录下的 HelloWorld.vue 、TheWelcome.vue、WelcomeItem.vue 这3个文件。

改造后的目录结构如下：

文件都准备好了，接下来编码。

第1步：修改App.vue页面 , 代码如下：（为什么将<router-view></router-view>放在这里，请参考【知识点一】中的说明）

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

添加 Welcome.vue 页面的代码：

<template>
    <div>
        <span>欢迎回来</span>
        <router-link to="/home">浏览进入</router-link>
    </div>    
</template>

添加 Home.vue 页面的代码：

<template>
    <div>
        <span>公众号商城首页</span> 
    </div>    
</template>

这几个页面都只有布局块<template> ，没有脚本块<script> 和样式块<style> ，这些后面根据需要展开讲，这样已经可以实现我们提出的需求了。

修改完成后在命令行窗口中运行 npm run dev 指令启动web服务器，打开网页访问网址：http://localhost:5173/ ，可以看到一片空白：

这说明访问网址 http://localhost:5173/ 的时候没有自动导航到 Welcome.vue 这个页面，这很正常，因为 index.html 第一次挂载的是根组件 App.vue ，

而 App.vue 中什么内容都没有，只有一个<router-view></router-view>用来接收其他页面导航过来的内容, 而此时并没有任何页面导航过来，所以显示了个寂寞。

如何改呢？vue-router 给了我们解决方法。

步骤：

第1步：在 src 目录下新建 router 文件夹，然后新增 routerx.js 的文件，添加代码如下：

说明：

1 行：导入 vue-router 包中的 createRouter, createWebHistory 函数。

3-6 行：定义路由映射数组，这是一个 json数组，path表示访问路径，name表示路由名称(必须唯一)，component表示访问路径对应的页面。

第4行表示访问根目录的时候打开Welcome.vue页面的内容。

8-11行：用createRouter( )方法实例化一个路由对象 router，该方法需传入一个json对象，其中 history表示路由模式使用 history , 另一种是 hash模式

，这两种模式生成的 url不同，以 home.vue 为例，生成的 url 见下表，官方示例中使用的是 history 模式，笔者推荐用 history 模式。

模式	URL 格式
history	http://localhost:5173/home
hash	http://localhost:5173/#/home

13 行：导出该实例对象，让外部可以使用。所有 .js文件中的对象或方法要让外部可以使用，都需要在文件末尾用 export 关键字导出，

否则外部即使引用了这个文件也无法使用相应的对象或方法。

第2步：在 main.js 中导入 routerx.js 中的 router 对象，然后注册到 vue3 的应用实例上使路由生效，代码如下：

注：import 的对象或方法如果在原文件中 export 时带 default 关键字， import 后的名称可以任意改名且不需要 "{ }" 包裹

，否则必须与原文件相同且放在 "{ }" 花括号中。

改完后刷新页面，如下：

点击 "浏览进入" 后页面如下：

可以看到，页面没有刷新，但是浏览器上的地址及内容都变成了 home.vue 了。

posted @ 2023-04-14 20:11 屏风马阅读(537) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

vue3微信公众号商城项目实战系列（4）第一个页面

公告