专栏首页地方网络工作室的专栏vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用

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 最大的变革,下一讲我们来讲哦!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件 前情回顾 在上一篇文章《Vue2+VueRo...

    FungLeo
  • vue3.0 Composition API 上手初体验 用路由循环,做个导航菜单

    通过前文的讲述,我已经基本讲清楚了 vue 3.0 的新特性,以及开发使用方法。只是演示 Demo 搞了好几个页面,只能输入地址进行跳转让我不爽,于是,我给我的...

    FungLeo
  • Linux\Mac 递归移除某文件夹下所有文件(不包含文件夹)的执行权限命令

    今天别人给了我传了一个文件夹,里面是一个项目代码。我查看了一下,发现所有文件都是有执行权限的。这让我很不爽,于是我将所有文件(不包含文件夹)的执行权限全部去掉。...

    FungLeo
  • vue-roter2 路由传参

    用户1741436
  • vue-roter2 路由传参

    用户1741436
  • 万字长文带你了解变分自编码器VAEs

    原文标题:Understanding Variational Autoencoders (VAEs)

    朴素人工智能
  • 【DB笔试面试748】在Oracle中,如何将RAC软件转换为单实例软件?

    在RAC环境中,只有在集群正常启动的情况下才能创建和启动单实例的数据库,否则报错:

    小麦苗DBA宝典
  • 【学术】一文搞懂自编码器及其用途(含代码示例)

    自编码器(Autoencoder)是一种旨在将它们的输入复制到的输出的神经网络。他们通过将输入压缩成一种隐藏空间表示(latent-space represen...

    AiTechYun
  • Elasticsearch SQL介绍及实例

    Elasticsearch 是一个全文搜索引擎,具有您期望的所有优点,例如相关性评分,词干,同义词等。而且,由于它是具有水平可扩展的分布式文档存储,因此它可以处...

    zhisheng
  • 大数据“撑起”线上消费金融

      双11期间,各大线上购物商城纷纷亮出优惠绝招。与往年不同的是,竞争一路延伸到了消费金融领域,今年不只比低价,更比“赊账”。 天猫分期购VS京东白条   日前...

    腾讯研究院

扫码关注云+社区

领取腾讯云代金券