Vue 学习笔记5

Vue 学习笔记5

@Author: YiHua Lee @Address: Guangdong province, China

路由vue-router

场景模拟

现在我们来实现这样一个功能:

一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换。


编写父组件

为了让接下来的功能比较清晰,我们先新建一个文件夹:src

然后新建一个HTML文件,作为入口:index.html

20200830003113

然后编写页面的基本结构:

20200830004018

样式:

20200830004110

编写登录及注册组件

接下来我们来实现登录组件,以前我们都是写在一个文件中,但是为了复用性,开发中都会把组件放入独立的JS文件中,我们新建一个user目录以及 login.jsregister.js

20200830010112

编写组件,这里我们只写模板,不写功能。

login.js内容如下:

20200830005802

register.js内容如下:

20200830005900

在父组件中引用

20200830010942

效果

20200830011051

问题

我们期待的是,当点击登录或注册按钮,分别显示登录页或注册页,而不是一起显示。

但是,如何才能动态加载组件,实现组件切换呢?

虽然使用原生的Html5和JS也能实现,但是官方推荐我们使用vue-router模块。


vue-router简介和安装

使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。

官网:https://router.vuejs.org/zh-cn/

使用npm安装:npm install vue-router --save

20200830011344

在index.html中引入依赖:

1
<script src="../node_modules/vue-router/dist/vue-router.js"></script>

快速入门

新建vue-router对象,并且指定路由规则:

20200830012034
  • 创建VueRouter对象,并指定路由参数
  • routes:路由规则的数组,可以指定多个对象,每个对象是一条路由规则,包含以下属性:
    • path:路由的路径
    • component:组件名称

在父组件中引入router对象:

20200830012400

页面跳转控制:

  • 通过<router-view>来指定一个锚点,当路由的路径匹配时,vue-router会自动把对应组件放到锚点位置进行渲染
  • 通过<router-link>指定一个跳转链接,当点击时,会触发vue-router的路由功能,路径中的hash值会随之改变
20200831121304

注意:单页应用中,页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

事实上,我们总共就一个HTML:index.html


评论