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

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 啥的,也不是不可以的哈!

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页