vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用

Posted 2022-07-29 FungLeo

vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用

前两讲，我们已经顺利的使用 vue3.0 将项目跑起来了。但是实在是过于简陋，目前我们几乎不可能开发只有一个页面的应用。因此，vue-router 是必不可少的。

这一讲，我们就来讲讲最新的 vue-router 配合 vue3.0 是如何玩的。首先，我们进入我们的项目目录，安装依赖。我的 demo 目录为 ~/Sites/myWork/demo/vue3-demo。

本人为 MacOS 环境， Windows 环境请自行将一些命令转换成你习惯的操作。比如在文件夹中操作，或在 vscode 等编辑器中操作。

安装 vue-router

# 进入项目文件夹
cd ~/Sites/myWork/demo/vue3-demo
# 安装 vue-router
npm i vue-router@next
# 进入 src 目录
cd src
# 创建路由和视图文件夹
mkdir router views
# 创建路由基础文件和首页基础文件
touch router/index.js views/Home.vue views/About.vue

这里我安装到的版本是 4.0.0-alpha.11 还在 alpha 阶段。估计过几天就进入 beta 版本了。

执行完这些操作后，我们的 src 目录结构如下：

├── App.vue
├── main.js
├── router
│   └── index.js
└── views
    ├── About.vue
    └── Home.vue

跟着我上面的命令走，结构应该就是这个。如果不是的话，就好好检查一下咯，然后调整一下目录结构。

编写我们的各个文件

src/router/index.js

// 可以根据路由模式的不同，后面俩可以只引用一个
import  createRouter, createWebHistory, createWebHashHistory  from 'vue-router'
import Home from '@/views/Home.vue'

// 构建我们的页面路由配置，可以看到，这里和原来的写法并无二致。
const routes = [
  
    path: '/',
    component: Home
  , 
    path: '/about',
    component: () => import('@/views/About.vue'),
  
]

const router = createRouter(
  // 使用 hash 模式构建路由（ url中带 # 号的那种)
  history: createWebHashHistory(),
  // 使用 history 模式构建路由 （ url 中没有 # 号，但生产环境需要特殊配置）
  // history: createWebHistory(),
  routes
)
export default router

可以看到，这里也和原来的写法完全不一样了，变成了函数式的写法，也不用引入 vue 了。

src/views/Home.vue

<template>
  这是我们的首页哦！
  <router-link to="/about">点这里去关于我们页面</router-link>
</template>

得益于 vue3.0 的特性，我们现在不比把组件内容全部包裹在某一个 div 下面了，一个 template 里面可以有多个根节点元素，是没有关系的。

如果我没记错的话，当年 vue 0.x 版本中也是这样的。后来必须加个根节点，我还吐槽了一阵子。

src/views/About.vue

<template>
  这里是关于我们的页面
  <router-link to="/">点这里去首页</router-link>
</template>

src/App.vue

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

我不喜欢无用的冗余节点，所以我的项目的 App.vue 文件，一概是只有一个 router-view

src/main.js

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

// 将创建的 App 搞个别名
const app = createApp(App)

// 使用路由配置
app.use(router)

// 挂载运行
app.mount('#app')

最近一直在写 koa 的东西，猛然间这样写 vue，让我有一种写 nodejs 后端的既视感。。。

这种感觉很好。如果你不理解，没关系，照抄。如果你理解，你自然知道我在说什么。

跑起来！

在项目根目录运行 npm run dev 即可把项目跑起来。我们看看结果：

点击链接，就可以看到关于我们的页面：

好的，可以看到，我们的 vue-router 已经很好的使用起来了！

小结

总的来说，构建页面路由的语法，是没有什么变化的。但是，在引用 vue-router 和创建上，有了变化。和 vue 3.0 一样，变成函数式的用法了。风格很统一，我很喜欢。

刚刚搜索了一下，发现中文资料比较少，有几个做视频教程的有讲到这些，但是视频教程是收费的。我尊重这些制作视频教程的老师，如果我的这些博文让你少赚钱了，我向你们道歉。

但是，如果作为学习的朋友，看到我的博文，就算赚到了。嘿嘿。点个赞，关个注，有啥问题给我评论留言。

此外，关于 vuex 的内容，我不准备在我的博文中讲到。原因有二，第一个是大多数小项目完全没必要上 vuex，第二个是目前的文档很不完善，等文档完善了，有之前的使用基础的朋友，可以很快上手的。你知道你要用，你就自然会用了。你不知道用在哪里，愣学，是没有意义的。

毕竟，学海无涯，而生有涯。

当然，因为我水平还是有限的，如果哪里讲错了，各位看官一定要在评论区中斧正，我这个人是知错就改的。

到目前为止，还是让我们的项目跑起来了，还没有谈到 vue 3.0 最大的变革，下一讲我们来讲哦！

本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。

---

《vue3.0 Composition API 上手初体验》 文章目录地址： https://blog.csdn.net/fungleo/category_10020552.html 我会不定期的补充一些相关内容，欢迎关注订阅！

文章代码仓库 https://github.com/fengcms/vue3-demo 会用 git 的朋友，可以去直接下载我的代码。当然，给我点个 star 啥的，也不是不可以的哈！